@extends('layouts.master')

@section('page_title','Edit Courier')
@section('title','District wise Courier')
@section('main_item','Courier')
@section('sub_item','District wise Courier')

@section('content')




    <!-- First Form (Left Side) -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h4 class="mt-0 header-title">District wise Courier</h4>
                <form action="{{ route('courier.districtwise.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <input type="hidden" name="couriers_id" value="{{ $courier->id }}">
                        <label class="col-md-2" style="font-weight: bold" for="add_disctrict">Add District</label>
                        <select class="form-control select2" id="add_disctrict" name="add_disctrict[]" required multiple>
                            <option value="">Select District</option>
                            @foreach($districts as $district)
                                <option value="{{ $district->id }}">{{ $district->name_en }}</option>
                            @endforeach
                        </select>
                    </div>   
                    <div class="row mt-3">
                        <div class="col-sm-12 text-right">
                            <button type="submit" class="btn btn-primary px-5 py-2">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Second Form (Right Side) -->
<div class="col-md-6">
    <div class="card">
        <div class="card-body">
            <h4 class="mt-0 header-title">Added District List</h4>
            <form id="district-delete-form" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="couriers_id" value="{{ $courier->id }}">
                <ul id="district-list">
                    @foreach($added_districts as $added_district)
                        <li id="district-{{ $added_district->id }}" class="list-group-item">
                            {{ $added_district->district->name_en }}
                            <button type="button" class="btn btn-danger  btn-sm delete-district" data-district-id="{{ $added_district->id }}">Delete</button>
                        </li>
                    @endforeach
                </ul>
            </form>
        </div>
    </div>
</div>

<style>
.delete-district {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px; /* Existing padding for top/bottom and left/right */
    cursor: pointer;
    margin-left: 20px; /* Space between the district name and button */
}

.delete-district:hover {
    background-color: #c82333;
}

.delete-district {
    margin-left: 25px; /* Add extra left margin for more space */
}
</style>


@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    @if (session('success'))
        toastr.success("{{ session('success') }}");
    @endif
$(document).ready(function() {
    // Delete district when the delete button is clicked
    $('.delete-district').on('click', function() {
        var districtId = $(this).data('district-id'); // Get the district ID
        var courierId = $('input[name="couriers_id"]').val(); // Get the courier ID

        // Make an AJAX request to delete the district
        $.ajax({
            url: '{{ route('courier.districtwise.destroy') }}', // The URL for the delete action
            type: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                couriers_id: courierId,
                district_id: districtId, // Send the district ID to delete
            },
            success: function(response) {
                if (response.success) {
                    // If deletion is successful, remove the district from the list
                    $('#district-' + districtId).remove();
                    toastr.success('District deleted successfully!'); // Toast notification for success
                } else {
                    toastr.error('Error: ' + response.message); // Toast notification for error
                }
            },
            error: function() {
                toastr.error('Something went wrong. Please try again.'); // Toast notification for error
            }
        });
    });
});
</script>

@endsection