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

@section('content')
    @include('adminlte-templates::common.errors')
    <section class="content-header">
        <h1>Vehicle Color</h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('admin.dashboard') }}"> <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                    Dashboard
                </a>
            </li>
            <li><a href=""> Vehicle Color </a></li>
            <li class="active">Vehicle Color 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>
                        Vehicle Color List
                    </h4>
                    <div class="pull-right">
                        <a data-toggle="modal" data-href="#create_color" href="#create_color" 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>Vehicle Color Name</th>
                                {{-- <th>Action</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($colors as $color)
                                <tr id="row-{{ $color->id }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $color->name }}</td>
                                    {{-- <td>
                                        <a href="javascript:void(0)" class="edit-area" data-id="{{ $color->id }}" data-name="{{ $color->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_vehicle_color')
    {{-- 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 Vehicle Color</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 Vehicle Color</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,
            "aaSorting": [
                [0, "desc"]
            ],
            "info": true,
        });
     
       $('#createSubCategory').submit(function (e) { 
        e.preventDefault();
            let data = {
                'name':$("#name").val()
            };
            $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: "{{route('admin.vehicle.settings.color-create')}}",
            data: data,
            dataType: "json",
            success: function (response) {
                $('#create_color').modal('hide');
                $('input').removeAttr('disabled');
                window.location.reload();
            },
            error: function (response) {
                $('input').removeAttr('disabled');
            },
        });
       });
    </script>
@stop