
<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/ar-css')
    @include('admin/ar-php-script')
    @include('admin/header_admin')

    <section id="dashboard" class="ar-dashboard-height">
        
        <div class="ar-dashboard-row" style="height:100%">
            <div id="ar-left-nav">
                @include('admin/left_nav')
            </div>

            <div id="ar-dashboard-content">

                <!-- ====== -->
                <label for="input-box" style="align-items:self-start">
                    <span style="margin-top:5px">Kota/Kecamatan</span>
                    <div id="kota" style="position:relative" x-data="provinsi">
                        <div id="search-open" @click.prevent="open = !open;" style="cursor:pointer;padding:5px;text-align:left">Cari Kota/Kecamatan <i class="ti-search"></i></div>

                        <div x-show="open" style="width:100%">
                            <input id="input-box" type="search" x-model="search" placeholder="Cari Kota/Wilayah tujuan pengiriman..." style="width:100%;padding:5px;background-color:#f8f8f8;">
                            <div id="search-filtered" style="width:100%;overflow:auto;background-color:#fff">
                                <template x-for="option in searchResults">
                                    <a @click.prevent="open = false; 
                                                    document.getElementById('search-open').innerHTML = option.name;
                                                    document.getElementById('shipping-cost').value = option.cost;
                                                    document.getElementById('regency-id').value = option.regency_id;
                                                    document.getElementById('district-id').value = option.id;" 
                                        x-text="option.name" style="padding:5px;display:block;font-size:10pt;text-align:left;cursor:pointer;border:thin solid lightgray">
                                    </a>
                                </template>
                            </div>
                        </div>
                        <div>
                            <div>District ID <span><input id="district-id" type="text"/></span></div>
                            <div>Shipping Cost <span><input id="shipping-cost" type="text"/></span></div>
                            <div>Regency ID <span><input id="regency-id" type="text"/></span></div>
                            <button id="btn-save-shipping-cost">Simpan</button>
                        </div>
                        
                    </div>
                </label>
                <!-- ====== -->
                <!--
                <button id="cek-ongkir">Cek Ongkir</button>
                -->

            </div>
            
        </div>
    </section>

    <div id="modal" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>AR Clean Customer Details</h5></div>

            <form id="myForm" style="overflow-y:scroll">
                <input type="hidden" id="id" name="id">
                
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" class="form-control" placeholder="Customer name" id="name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label>Address:</label>
                    <input type="text" class="form-control" placeholder="Customer address" id="address" name="address">
                </div>
                
                <div class="form-group">
                    <label>Phone:</label>
                    <input type="text" class="form-control" placeholder="Customer phone" id="phone" name="phone" required>
                </div>
                
                <div class="form-group">
                    <label>Email:</label>
                    <input type="email" class="form-control" placeholder="Customer email" id="email" name="email" required>
                </div>
                
                <div class="form-group">
                    <button id="btn-store" class="btn btn-primary">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>        
    </div>
    
    @include('admin/ar-script')
    
    <script>
        $("#btn-save-shipping-cost").click(function(e){
            e.preventDefault();

            let id = $("#district-id").val();
            let cost = $("#shipping-cost").val();
            let regency_id = $("#regency-id").val();

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "/shipping-save",
                method: "POST",
                data: {'id':id,'cost':cost,'regency_id':regency_id},
                success: function(response){
                    document.location.reload();
                }
            });
        });
        
    /* On progress
        $("#cek-ongkir").click(function(e){
            e.preventDefault();

            $.ajax({
                headers: {
                    'accept': 'application/json',
                    'key': 'EIeyMAeuaa5626a2f939abfedWPe8h5m',
                    'content-type': 'application/json',
                },
                url: "https://rajaongkir.komerce.id/api/v1/calculate/domestic-cost",
                method: "POST",
                data: {origin: '31555', destination: '68423', weight: 1000, courier: 'jne'},
                success: function(response){
                    console.log(response);
                }
            });
        });
    */  
    </script>

    <!-- Alpine JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- My Js
    <script src="admin/assets/js/script.js?version=1.0"></script>
    <!-- App js -->
    <script src="admin/assets/src/app.js?version=1.5"></script>
    <link rel="stylesheet" href="https://idekreasibox.com/assets/vendors/themify-icons/css/themify-icons.css"/>

</x-layout>