@extends('admin.layouts.app')

@section('title', 'Mapping Dealer to ASM')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-outline-info">
                <div class="card-header">
                    <h4 class="card-title">{{ __('Mapping Dealer to ASM') }}</h4>

                </div>
                <div class="card-body p-4">

                            <div class="row">
                                @can('mapping-dealer-create')
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title"> Mapping Dealer to ASM</h4>
                                    </div>
                                    <div class="card-body">
                                    <form method="POST" action="{{ route('mapping-dealer.store') }}">
                                    @csrf
                                    @method('POST')
                                            <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Country</label>
                                                <select type="country_id" id="country_id" name="country_id" class="form-control @error('country_id') is-invalid @enderror" onchange="getAsm(this.value);getDealers(this.value)"  required>
                                                <option value="">{{ __('Select Country') }}</option>
                                                @foreach($countries as $r)
                                                <option value="{{ $r->id }}">{{  $r->name }}</option>
                                                @endforeach
                                                </select>
                                                @include('admin.partials.form-errors', array('field' => 'country_id'))
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">ASM</label>
                                                <select type="asm_id" id="asm_id" name="asm_id" class="form-control @error('asm_id') is-invalid @enderror"  required>
                                                <option value="">{{ __('Select ASM') }}</option>

                                                </select>
                                                @include('admin.partials.form-errors', array('field' => 'country_id'))
                                            </div>
                                             <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Dealer/s</label>
                                                <div id="asmCheckboxContainer">
                                                    <!-- Checkboxes will be inserted here -->
                                                </div>
                                                @include('admin.partials.form-errors', array('field' => 'dealer_id'))
                                            </div>

                                            <div class="mt-4">
                                                <button type="submit" class="btn btn-primary w-md">Submit</button>
                                            </div>
                                    </form>
                                    </div>
                                </div>
                            </div>
                            @endcan
                            <!-- end col -->
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Mapping Countries</h4>

                                    </div>
                                    <div class="card-body">


                                    <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">        <thead>
                                            <tr>
                                                <th>Dealer</th>
                                                <th>ASM</th>
                                                <th>Actions</th>



                                            </tr>
                                            </thead>


                                            <tbody>
                                                @if(isset($users)!=null)
                                            @foreach($users as $c)
                                            <tr>
                                                <td>{{$c->name}}</td>
                                                <td>{{$c->asm_name}}</td>
                                                <td>


            @can('mapping-dealer-delete')
                {!! Form::open(['method' => 'GET','route' => ['mapping-dealer.edit', $c->id],'style'=>'display:inline', 'onsubmit' => 'return confirm("Are you sure you want to delete this Record?")']) !!}
                    {!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm']) !!}
                {!! Form::close() !!}
            @endcan
                                                </td>
                                            </tr>
                                            @endforeach
                                            @else
                                            No record Found
                                            @endif

                                            </tbody>
                                        </table>



                                    </div>
                                </div>
                            </div>
                            <!-- end col -->
                        </div>
                </div>
            </div>
        </div>
    </div>
<!-- JAVASCRIPT -->
        <script src="{{url('/')}}/assets/libs/jquery/jquery.min.js"></script>
        <script src="{{url('/')}}/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="{{url('/')}}/assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="{{url('/')}}/assets/libs/simplebar/simplebar.min.js"></script>
        <script src="{{url('/')}}/assets/libs/node-waves/waves.min.js"></script>
        <script src="{{url('/')}}/assets/libs/feather-icons/feather.min.js"></script>
        <!-- pace js -->
        <script src="{{url('/')}}/assets/libs/pace-js/pace.min.js"></script>

        <!-- apexcharts -->
        <script src="{{url('/')}}/assets/libs/apexcharts/apexcharts.min.js"></script>

        <!-- Plugins js-->
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js"></script>
        <!-- dashboard init -->
        <script src="{{url('/')}}/assets/js/pages/dashboard.init.js"></script>

        <script src="{{url('/')}}/assets/js/app.js"></script>
        <script src="{{url('/')}}/assets/js/app.js"></script>
        <script type="text/javascript">
               function getAsm()
                {
                    var country_id=document.getElementById('country_id').value;

                    var url = '{{ route("mapping-dealer.getAsmByCountry",[':country_id']) }}';
                    url = url.replace(':country_id',country_id);

                    if(country_id) {
                        $.ajax({
                            url: url,
                            type: "GET",
                            dataType: "json",

                            success:function(data) {
                                $('select[name="asm_id"]').empty();
                                $('select[name="asm_id"]').prepend('<option value="">--Select ASM--</option>');
                                $.each(data, function(key, value) {
                                    $('select[name="asm_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                                });
                            }
                        });
                    } else{
                        $('select[name="asm_id"]').empty();
                    }


                }




            </script>

            <script type="text/javascript">
               function getDealers()
                {
                    var country_id=document.getElementById('country_id').value;

                    var url = '{{ route("mapping-dealer.getDealerByCountry",[':country_id']) }}';
                    url = url.replace(':country_id',country_id);

                    if(country_id) {
                        $.ajax({
                            url: url,
                            type: "GET",
                            dataType: "json",

                            success:function(data) {
                                var checkboxContainer = $('#asmCheckboxContainer');
                                    checkboxContainer.empty();

                                    $.each(data, function (key, value) {
                                        var checkbox = $('<input type="checkbox" name="dealer_id[]" value="' + key + '">');
                                        var label = $('<label>' + value + '</label>');

                                        checkboxContainer.append(checkbox);
                                        checkboxContainer.append(label);
                                        checkboxContainer.append('<br>'); // Add line break for spacing
                                    });
                            }
                        });
                    } else{
                        $('#asmCheckboxContainer').empty();
                    }


                }




            </script>
    @endsection