@extends('backend.layouts.master')
@section('section-title', 'Pathao')
@section('page-title', 'Add Pathao')

{{-- @if (check_permission('product.update'))
    @section('action-button')
        <a href="{{ route('product.index') }}" class="btn add_list_btn">
            <i class="mr-2 feather icon-list"></i>
            All Product
        </a>
    @endsection
@endif --}}

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card m-b-30 card_style">
                <div class="card-body">
                    <div>
                        <form class="row g-3 needs-validation" method="POST" action="{{ route('pathao.store') }}"
                            enctype="multipart/form-data" novalidate>
                            @csrf
                            <div class="mt-2 col-md-4">
                                <label for="selling_price" class="form-label fw-bold">Shop *</label>
                                <select name="store_id" class="form-control" id="">
                                    <option value="">Select Shop</option>
                                    @foreach ($shops as $item)
                                        <option value="{{ $item['store_id'] }}">{{ $item['store_name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- Product name --}}
                            <div class="mt-2 col-md-6">
                                <label for="name" class="form-label fw-bold">recipient_name *</label>
                                <input type="text" onfocus="this.select()" autofocus class="form-control"
                                    name="recipient_name" placeholder="Enter Name">
                                {{-- <div class="errors">{{ $errors->has('name') ? $errors->first('name') : '' }}</div> --}}
                            </div>

                            {{-- Product barcode  --}}
                            <div class="mt-2 col-md-6">
                                <label for="barcode" class="form-label fw-bold">recipient_phone</label>
                                <input type="text" class="form-control" placeholder="Enter Barcode"
                                    name="recipient_phone">
                                {{-- <div class="errors">{{ $errors->has('barcode') ? $errors->first('barcode') : '' }}</div> --}}
                            </div>

                            {{-- Price --}}
                            <div class="mt-2 col-md-6">
                                <label for="purchase_price" class="form-label fw-bold">recipient_address *</label>
                                <input type="text" class="form-control" name="recipient_address" id="">
                                {{-- <div class="errors">
                                    {{ $errors->has('purchase_price') ? $errors->first('purchase_price') : '' }}
                                </div> --}}
                            </div>

                            
                            <div class="mt-2 col-md-4">
                                <label for="selling_price" class="form-label fw-bold">city *</label>
                                <select name="recipient_city" class="form-control" id="cityDropdown">
                                    <option value="">Select City</option>
                                    @foreach ($citits as $item)
                                        <option value="{{ $item['city_id'] }}">{{ $item['city_name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mt-2 col-md-4">
                                <label for="selling_price" class="form-label fw-bold">Zone *</label>
                                <select name="recipient_zone" class="form-control" id="zoneDropdown">
                                    <option value="">Select Zone</option>
                                </select>
                            </div>
                            <div class="mt-2 col-md-4">
                                <label for="selling_price" class="form-label fw-bold">Area *</label>
                                <select name="recipient_area" class="form-control" id="areaDropdown">
                                    <option value="">Select Area</option>
                                </select>
                            </div>
                            <div class="mt-2 col-md-6">
                                <label for="selling_price" class="form-label fw-bold">Delivery Type *</label>
                                <select name="delivery_type" class="form-control" id="">
                                    <option value="48">Normal Delivery</option>
                                    <option value="12">On Demand Delivery</option>
                                </select>
                            </div>
                            <div class="mt-2 col-md-6">
                                <label for="selling_price" class="form-label fw-bold">Product Type *</label>
                                <select name="item_type" class="form-control" id="">
                                    <option value="1">Document</option>
                                    <option value="2">Parcel</option>
                                </select>
                            </div>
                            <div class="mt-2 col-md-6">
                                <label for="selling_price" class="form-label fw-bold">Special Instructions</label>
                                <input type="text" class="form-control" name="special_instruction" id="">
                            </div>

                            <div class="mt-2 col-md-6">
                                <label for="selling_price" class="form-label fw-bold"> Quantity*</label>
                                <input type="number" class="form-control" name="item_quantity" value="1" id="">
                            </div>

                            <div class="mt-2 col-md-6">
                                <label for="selling_price" class="form-label fw-bold">Total Weight*</label>
                                <input type="number" class="form-control" name="item_weight" value="0.5" id="">
                                {{-- <select name="item_weight" class="form-control" id="areaDropdown">
                                    <option value="0-0.5">0-0.5</option>
                                    <option value="0.5-1">0.5-1</option>
                                    <option value="1-2">1-2</option>
                                    <option value="2-3">2-3</option>
                                    <option value="3-4">3-4</option>
                                    <option value="4-5">4-5</option>
                                    <option value="5-6">5-6</option>
                                    <option value="6-7">6-7</option>
                                    <option value="7-8">7-8</option>
                                    <option value="8-9">8-9</option>
                                    <option value="9-10">9-10</option>
                                    <option value="10-12">10-12</option>
                                    <option value="13-15">13-15</option>
                                </select> --}}
                            </div>

                            <div class="mt-2 col-md-6">
                                <label for="selling_price" class="form-label fw-bold">description</label>
                                <input type="text" class="form-control" name="item_description" id="">
                            </div>
                            <div class="mt-2 col-md-6">
                                <label for="selling_price" class="form-label fw-bold">Amount to Collect *</label>
                                <input type="number" class="form-control" name="amount_to_collect" id="">
                            </div>


                            <div class="mt-3 text-center col-12">
                                <button id="submitBtn" class="btn save_btn" type="submit"> Save </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#cityDropdown').on('change', function() {
                let city_id = $(this).val();
                if (city_id) {
                    $.ajax({
                        url: "{{ route('fetch.zones') }}",
                        type: "GET",
                        data: {
                            city_id: city_id
                        },
                        success: function(response) {
                            console.log(response);
                            if (response.status === 200) {
                                let options = '<option value="">Select Zone</option>';
                                $.each(response.data.data, function(index, zone) {
                                    options +=
                                        `<option value="${zone.zone_id}">${zone.zone_name}</option>`;
                                });
                                $("#zoneDropdown").html(options);
                            }
                        }
                    });
                } else {
                    $("#zoneDropdown").html('<option value="">Select Zone</option>');
                }
            });
            $('#zoneDropdown').on('change', function() {
                let zone_id = $(this).val();
                if (zone_id) {
                    $.ajax({
                        url: "{{ route('fetch.areas') }}",
                        type: "GET",
                        data: {
                            zone_id: zone_id
                        },
                        success: function(response) {
                            console.log(response);
                            if (response.status === 200) {
                                let options = '<option value="">Select Area</option>';
                                $.each(response.data.data, function(index, area) {
                                    options +=
                                        `<option value="${area.area_id}">${area.area_name}</option>`;
                                });
                                $("#areaDropdown").html(options);
                            }
                        }
                    });
                } else {
                    $("#areaDropdown").html('<option value="">Select Area</option>');
                }
            });
        });
    </script>
@endpush