@extends(env('DOMAINCODE') . '.admin/layouts/default')
@section('title')
   Make/Model
    @parent
@stop

@section('content')
    @include('adminlte-templates::common.errors')
    <section class="content-header">
        <h1> Make/Model</h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('admin.dashboard') }}"> <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                    Vehicle
                </a>
            </li>
            <li><a href="">Make/Model </a></li>
            <li class="active"> Make/Model List </li>
        </ol>
    </section>

    <section class="content paddingleft_right15">
        <div class="row">
            <div class="panel panel-success ">
                <div class="panel-heading clearfix">
                    <h4 class="panel-title pull-left"> <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                       Make/Model List
                    </h4>
                    <div class="pull-right">
                        <a data-toggle="modal" data-href="#create_make" href="#create_make" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-plus"></span> @lang('button.create')</a>
                    </div>
                </div>
                <br />
                <div class="panel-body table-responsive">
                    <table class="table table-striped table-bordered data-table" width="100%">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Make</th>
                                <th>Model</th>
                                {{-- <th>Action</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($make as $make)
                                <tr id="row-{{ $make->id }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $make->name }}</td>
                                    <td>
                                        @foreach ($make->vehicle_model as $model)
                                            <ul>
                                                <li>{{$model->name}}</li>
                                            </ul>
                                        @endforeach
                                    </td>
                                    <td>
                                        <a data-toggle="modal" data-href="#create_model" href="#create_model" class="create_model_btn" data-make_id="{{ $make->id }}"><span class="glyphicon glyphicon-plus"></span></a>
                                        {{-- <a href="javascript:void(0)" class="edit-area" data-id="{{ $make->id }}" data-name="{{ $make->name }}"><i class="livicon" data-name="edit" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="edit subDivision"></i></a> --}}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    @include('admin.vehicles.modals.create_make')
    @include('admin.vehicles.modals.create_model')
    {{-- Edit Modal --}}
    <div class="modal fade" id="edit-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Sub Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="edit-form">
                        <div class="form-group col-12">
                            <label for="title" class="control-label">Property Name</label>
                            <input type="text" name="property_type_name" id="property_type_name" class="form-control">
                        </div>
                        <input type="hidden" name="property_type_id" id="edit_property_id">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="edit-submit-btn">Save</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="delete_confirmation" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Sub Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure to delete this item? This operation is irreversible.
                    <form id="delete-form">
                        <input type="hidden" name="property_type_id" id="property_id">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="submit-btn">Delete</button>
                </div>
            </div>
        </div>
    </div>
@stop
@section('footer_scripts')
    <link rel="stylesheet" type="text/css" href="{{ asset('HR/datatables/css/dataTables.bootstrap.css') }}" />
    <script type="text/javascript" src="{{ asset('HR/datatables/js/jquery.dataTables.js') }}"></script>
    <script type="text/javascript" src="{{ asset('HR/datatables/js/dataTables.bootstrap.js') }}"></script>

    <script>
        $('.data-table').DataTable({
            "bInfo": false,
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
        });
     
       $('#createMake').submit(function (e) { 
        e.preventDefault();
            let data = {
                'make_name':$("#make_name").val(),
                'model_name':$("#model_name").val()
            };
            $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: "{{route('admin.vehicle.settings.make-create')}}",
            data: data,
            dataType: "json",
            success: function (response) {
                $('#create_make').modal('hide');
                $('input').removeAttr('disabled');
                window.location.reload();
            },
            error: function (response) {
                $('input').removeAttr('disabled');
            },
        });
       });
       $('.create_model_btn').click(function (e) { 
        e.preventDefault();
        let data = {
                'make_id':$(this).attr("data-make_id")
            };
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: "{{route('admin.vehicle.settings.make-fetch')}}",
            data: data,
            dataType: "json",
            success: function (response) {
                $("#make_id").val(response.make.id);
            }
        });
       });
       $('#createModel').submit(function (e) { 
        e.preventDefault();
            let data = {
                'make_id':$("#make_id").val(),
                'name':$("#name").val()
            };
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "post",
                url: "{{route('admin.vehicle.settings.model-create')}}",
                data: data,
                dataType: "json",
                success: function (response) {
                    $('#create_model').modal('hide');
                    $('input').removeAttr('disabled');
                    window.location.reload();
                },
                error: function (response) {
                    $('input').removeAttr('disabled');
                },
        });
       });
    </script>
@stop