@extends('layouts.master')

@section('style')
<style>
    .modal {
        overflow-y: visible; /* Ensure the modal allows the dropdown to overflow */
    }

    .modal .form-control {
        z-index: 1051; /* Higher than the modal backdrop's z-index */
        position: relative; /* Ensure z-index applies */
    }
</style>

@endsection

@section('content')
<main id="main" class="main">
    <section class="section dashboard">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">{{ isset($service) ? 'Edit' : 'Add' }} Service</h1>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body mt-5 table-responsive bg-white py-4 rounded">

     



            <form
                action="{{ isset($service) ? route('courier-services.update', $service->id) : route('courier-services.store') }}"
                method="POST" class="col-md-7 mx-auto">
                @if(session('success'))
                    <div class="alert alert-success my-3">
                        {{ session('success') }}
                    </div>
                @endif
                @csrf
                @if(isset($service))
                    @method('PUT')
                @endif

                <div class="form-group my-2">
                    <label for="parent_id">Parent Courier</label>
                    <select class="form-control @error('parent_id') is-invalid @enderror" id="parent_id"
                        name="parent_id" required>
                        <option value="">Select a Parent Courier</option>
                        @foreach($parentCouriers as $courier)
                            <option value="{{ $courier->id }}" {{ (isset($service) && $service->parent_id == $courier->id) || old('parent_id') == $courier->id ? 'selected' : '' }}>{{ $courier->courier_name }}</option>
                        @endforeach
                    </select>
                    @error('parent_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="preset_id">Preset ID</label>
                    <input type="text" class="form-control @error('preset_id') is-invalid @enderror" id="preset_id"
                        name="preset_id" value="{{ old('preset_id', isset($service) ? $service->preset_id : '') }}"
                        required>
                    @error('preset_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="Name">Service Name</label>
                    <input type="text" class="form-control @error('Name') is-invalid @enderror" id="Name" name="Name"
                        value="{{ old('Name', isset($service) ? $service->Name : '') }}" required>
                    @error('Name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="service_id">Service ID</label>
                    <input type="text" class="form-control @error('service_id') is-invalid @enderror" id="service_id"
                        name="service_id" value="{{ old('service_id', isset($service) ? $service->service_id : '') }}"
                        required>
                    @error('service_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="exp_lead_time">Expected Lead Time</label>
                    <select class="form-control @error('exp_lead_time') is-invalid @enderror" id="exp_lead_time"
                        name="exp_lead_time">
                        <option value="">Select Expected Lead Time</option>
                        <option value="same_day" {{ (isset($service) && $service->exp_lead_time == 'same_day') || old('exp_lead_time') == 'same_day' ? 'selected' : '' }}>Same Day</option>
                        <option value="next_day" {{ (isset($service) && $service->exp_lead_time == 'next_day') || old('exp_lead_time') == 'next_day' ? 'selected' : '' }}>Next Day</option>
                        <option value="two_day" {{ (isset($service) && $service->exp_lead_time == 'two_day') || old('exp_lead_time') == 'two_day' ? 'selected' : '' }}>Two Day</option>
                        <option value="two_day_plus" {{ (isset($service) && $service->exp_lead_time == 'two_day_plus') || old('exp_lead_time') == 'two_day_plus' ? 'selected' : '' }}>Two Day Plus</option>
                        <option value="saturday" {{ (isset($service) && $service->exp_lead_time == 'saturday') || old('exp_lead_time') == 'saturday' ? 'selected' : '' }}>Saturday</option>
                        <option value="sunday" {{ (isset($service) && $service->exp_lead_time == 'sunday') || old('exp_lead_time') == 'sunday' ? 'selected' : '' }}>Sunday</option>
                    </select>
                    @error('exp_lead_time')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group my-2">
                    <label for="type">Package Type</label>
                    <select class="form-control @error('type') is-invalid @enderror" id="type" name="type">
                        <option value="">Select Expected Lead Time</option>
                        <option selected value="Parcel" {{ (isset($service) && $service->type == 'Parcel') || old('type') == 'Parcel' ? 'selected' : '' }}>Parcel</option>
                        <option value="Pallet" {{ (isset($service) && $service->type == 'Pallet') || old('type') == 'Pallet' ? 'selected' : '' }}>Pallet</option>

                    </select>
                    @error('type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class=" my-2">
                    <input type="checkbox" class="form-check-input @error('pickup') is-invalid @enderror" id="pickup"
                        name="pickup" {{ old('pickup', isset($service) && $service->pickup == '1' ? 'checked' : '') }}>
                    @error('pickup')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <label for="pickup">Pickup</label>

                    <input type="checkbox" class="form-check-input @error('dropoff') is-invalid @enderror" id="dropoff"
                        name="dropoff" {{ old('dropoff', isset($service) && $service->dropoff == '1' ? 'checked' : '') }}>
                    @error('dropoff')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <label for="dropoff">Drop Off</label>
                </div>

                <div class="form-group my-2">
                    <label for="service_key">Service Key</label>
                    <input type="text" class="form-control @error('service_key') is-invalid @enderror" id="service_key"
                        name="service_key"
                        value="{{ old('service_key', isset($service) ? $service->service_key : '') }}">
                    @error('service_key')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="service_code">Service Code</label>
                    <input type="text" class="form-control @error('service_code') is-invalid @enderror"
                        id="service_code" name="service_code"
                        value="{{ old('service_code', isset($service) ? $service->service_code : '') }}">
                    @error('service_code')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="service_surcharge">Service Surcharge</label>
                    <input type="text" class="form-control @error('service_surcharge') is-invalid @enderror"
                        id="service_surcharge" name="service_surcharge"
                        value="{{ old('service_surcharge', isset($service) ? $service->service_surcharge : '') }}">
                    @error('service_surcharge')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="global_product_code">Global Product Code</label>
                    <input type="text" class="form-control @error('global_product_code') is-invalid @enderror"
                        id="global_product_code" name="global_product_code"
                        value="{{ old('global_product_code', isset($service) ? $service->global_product_code : '') }}">
                    @error('global_product_code')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group my-2">
                    <label for="local_product_code">Local Product Code</label>
                    <input type="text" class="form-control @error('local_product_code') is-invalid @enderror"
                        id="local_product_code" name="local_product_code"
                        value="{{ old('local_product_code', isset($service) ? $service->local_product_code : '') }}">
                    @error('local_product_code')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group my-2">
                    <label for="quote_tag">Quote Tag</label>
                    <textarea class="form-control @error('quote_tag') is-invalid @enderror" id="quote_tag"
                        name="quote_tag" rows="1"
                        placeholder="Enter a tag line">{{ old('quote_tag', isset($service) ? $service->quote_tag : '') }}</textarea>
                    @error('quote_tag')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group my-2">
                    <label for="tag_bg">Quote Background Color</label>
                    <input type="color" class="form-control @error('tag_bg') is-invalid @enderror" id="tag_bg"
                        value="{{ old('tag_bg', isset($service) ? $service->tag_bg : '') }}" name="tag_bg" rows="1"
                        placeholder="Enter a color hex code"></input>
                    @error('tag_bg')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="card mt-4">
                    <div class="card-header">
                        <h5>Zones</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group ">
                            <label for="copy_zones_from">Copy Zones From</label>
                            <select class="form-control" id="copy_zones_from">
                                <option value="">Select a Courier</option>
                                @foreach($allServices as $s)
                                    <option value="{{ $s->id }}">{{ $s->Name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <button type="button" class="btn btn-primary" id="copy-zones-btn">Copy Zones</button>

                        <hr>
                        <div id="zones-container">

                            <!-- Template for a single zone entry -->
                            @if(isset($service))


                                @foreach($service->zones as $zone)
                                    <div class="zone-entry">
                                        <div class="form-group">
                                            <label for="zone_name">Zone Name</label>
                                            <input type="text" class="form-control" name="zone_name[]" value="{{ $zone->name }}"
                                                required>
                                        </div>

                                        <div class="form-group">
                                            <label for="inclusions">Inclusion Keywords</label>
                                            <textarea class="form-control" name="inclusions[]"
                                                rows="2">{{ $zone->inclusions }}</textarea>
                                        </div>

                                        <div class="form-group">
                                            <label for="exclusions">Exclusion Keywords</label>
                                            <textarea class="form-control" name="exclusions[]"
                                                rows="2">{{ $zone->exclusions }}</textarea>
                                        </div>

                                        <button type="button" class="btn btn-danger remove-zone">Remove Zone</button>
                                        <hr>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <!-- Add New Zone Button -->
                        <button type="button" class="btn btn-primary" id="add-zone">Add New Zone</button>
                    </div>
                </div>
                <div class="card mt-4">
    <div class="card-header">
        <h5>Weight Classes</h5>
    </div>
    <div class="card-body">
        <!-- Copy weight classes from another service -->
        <div class="form-group">
            <label for="copy_weight_classes_from">Copy Weight Classes From</label>
            <select class="form-control" id="copy_weight_classes_from">
                <option value="">Select a Courier</option>
                @foreach($allServices as $s)
                    <option value="{{ $s->id }}">{{ $s->Name }}</option>
                @endforeach
            </select>
        </div>
        <button type="button" class="btn btn-primary" id="copy-weight-classes-btn">Copy Weight Classes</button>

        <hr>

        <!-- Weight classes container -->
        <div id="weight-classes-container">
            @if(isset($service))
                @foreach($service->weightClasses as $weightClass)
                    <div class="weight-class-entry">
                        <div class="form-group">
                            <label for="weight_name">Weight Class Name</label>
                            <input type="text" class="form-control" name="weight_name[]"
                                value="{{ $weightClass->weight_name }}" required>
                        </div>

                        <div class="form-group">
                            <label for="min_weight">Minimum Weight (kg)</label>
                            <input type="number" class="form-control" name="min_weight[]"
                                value="{{ $weightClass->min_weight }}" step="0.01" required>
                        </div>

                        <div class="form-group">
                            <label for="max_weight">Maximum Weight (kg)</label>
                            <input type="number" class="form-control" name="max_weight[]"
                                value="{{ $weightClass->max_weight }}" step="0.01" required>
                        </div>

                        <button type="button" class="btn btn-danger remove-weight-class">Remove Weight Class</button>
                        <hr>
                    </div>
                @endforeach
            @endif
            <!-- Dynamic weight class inputs will be added here -->
        </div>

        <!-- Button to add a new weight class -->
        <button type="button" class="btn btn-primary" id="add-weight-class">Add New Weight Class</button>
    </div>
</div>


                <button type="submit" class="btn btn-primary">{{ isset($service) ? 'Update' : 'Submit' }}</button>
            </form>
        </div>
    </section>
</main>
@endsection

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
    let weightClassesContainer = document.getElementById('weight-classes-container');
    let copyWeightClassesBtn = document.getElementById('copy-weight-classes-btn');
    let copyWeightClassesFromDropdown = document.getElementById('copy_weight_classes_from');

    // Function to add weight class to the form
    function addWeightClassToForm(weightClass) {
        let newWeightClass = document.createElement('div');
        newWeightClass.classList.add('weight-class-entry');

        newWeightClass.innerHTML = `
            <div class="form-group">
                <label for="weight_name">Weight Class Name</label>
                <input type="text" class="form-control" name="weight_name[]" value="${weightClass.weight_name}" required>
            </div>

            <div class="form-group">
                <label for="min_weight">Minimum Weight (kg)</label>
                <input type="number" class="form-control" name="min_weight[]" value="${weightClass.min_weight}" step="0.01" required>
            </div>

            <div class="form-group">
                <label for="max_weight">Maximum Weight (kg)</label>
                <input type="number" class="form-control" name="max_weight[]" value="${weightClass.max_weight}" step="0.01" required>
            </div>

            <button type="button" class="btn btn-danger remove-weight-class">Remove Weight Class</button>
            <hr>
        `;

        weightClassesContainer.appendChild(newWeightClass);

        // Add event listener for removing the new weight class
        newWeightClass.querySelector('.remove-weight-class').addEventListener('click', function () {
            weightClassesContainer.removeChild(newWeightClass);
        });
    }

    // Handle the copy weight classes button click
    copyWeightClassesBtn.addEventListener('click', function () {
        let courierId = copyWeightClassesFromDropdown.value;

        if (courierId) {
            // Make AJAX call to fetch weight classes for the selected courier
            fetch(`/courier-services/couriers/${courierId}/weight-classes`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(weightClass => addWeightClassToForm(weightClass));
                })
                .catch(error => console.error('Error fetching weight classes:', error));
        } else {
            alert('Please select a courier to copy weight classes from.');
        }
    });
});

    document.addEventListener('DOMContentLoaded', function () {
        // Select the zones container
        let zonesContainer = document.getElementById('zones-container');
        let addZoneButton = document.getElementById('add-zone');

        // Handle the add zone button click
        addZoneButton.addEventListener('click', function () {
            let newZone = document.createElement('div');
            newZone.classList.add('zone-entry');

            newZone.innerHTML = `
                <div class="form-group">
                    <label for="zone_name">Zone Name</label>
                    <input type="text" class="form-control" name="zone_name[]" placeholder="Zone Name" required>
                </div>

                <div class="form-group">
                    <label for="inclusions">Inclusion Keywords</label>
                    <textarea class="form-control" name="inclusions[]" rows="2" placeholder="Enter inclusion keywords"></textarea>
                </div>

                <div class="form-group">
                    <label for="exclusions">Exclusion Keywords</label>
                    <textarea class="form-control" name="exclusions[]" rows="2" placeholder="Enter exclusion keywords"></textarea>
                </div>

                <button type="button" class="btn btn-danger remove-zone">Remove Zone</button>
                <hr>
            `;

            zonesContainer.appendChild(newZone);

            // Add event listener for removing the new zone
            newZone.querySelector('.remove-zone').addEventListener('click', function () {
                zonesContainer.removeChild(newZone);
            });
        });

        // Handle existing remove buttons
        document.querySelectorAll('.remove-zone').forEach(function (button) {
            button.addEventListener('click', function () {
                this.parentElement.remove();
            });
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let zonesContainer = document.getElementById('zones-container');
        let copyZonesBtn = document.getElementById('copy-zones-btn');
        let copyZonesFromDropdown = document.getElementById('copy_zones_from');

        // Function to add zones to the form
        function addZoneToForm(zone) {
            let newZone = document.createElement('div');
            newZone.classList.add('zone-entry');

            newZone.innerHTML = `
                <div class="form-group">
                    <label for="zone_name">Zone Name</label>
                    <input type="text" class="form-control" name="zone_name[]" value="${zone.name}" placeholder="Zone Name" required>
                </div>

                <div class="form-group">
                    <label for="inclusions">Inclusion Keywords</label>
                    <textarea class="form-control" name="inclusions[]" rows="2">${zone.inclusions}</textarea>
                </div>

                <div class="form-group">
                    <label for="exclusions">Exclusion Keywords</label>
                    <textarea class="form-control" name="exclusions[]" rows="2">${zone.exclusions}</textarea>
                </div>

                <button type="button" class="btn btn-danger remove-zone">Remove Zone</button>
                <hr>
            `;

            zonesContainer.appendChild(newZone);

            // Add event listener for removing the new zone
            newZone.querySelector('.remove-zone').addEventListener('click', function () {
                zonesContainer.removeChild(newZone);
            });
        }

        // Handle the copy zones button click
        copyZonesBtn.addEventListener('click', function () {
            let courierId = copyZonesFromDropdown.value;

            if (courierId) {
                // Make AJAX call to fetch zones for the selected courier
                fetch(`/courier-services/couriers/${courierId}/zones`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(zone => addZoneToForm(zone));
                    })
                    .catch(error => console.error('Error fetching zones:', error));
            } else {
                alert('Please select a courier to copy zones from.');
            }
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let weightClassesContainer = document.getElementById('weight-classes-container');
        let addWeightClassBtn = document.getElementById('add-weight-class');

        // Function to add a new weight class form entry
        function addWeightClassToForm(weightClass = {}) {
            let newWeightClass = document.createElement('div');
            newWeightClass.classList.add('weight-class-entry');

            newWeightClass.innerHTML = `
                <div class="form-group">
                    <label for="weight_name">Weight Class Name</label>
                    <input type="text" class="form-control" name="weight_name[]" value="${weightClass.weight_name || ''}" placeholder="Weight Class Name" required>
                </div>

                <div class="form-group">
                    <label for="min_weight">Minimum Weight (kg)</label>
                    <input type="number" step="0.01" class="form-control" name="min_weight[]" value="${weightClass.min_weight || ''}" placeholder="Min Weight" required>
                </div>

                <div class="form-group">
                    <label for="max_weight">Maximum Weight (kg)</label>
                    <input type="number" step="0.01" class="form-control" name="max_weight[]" value="${weightClass.max_weight || ''}" placeholder="Max Weight" required>
                </div>

                <button type="button" class="btn btn-danger remove-weight-class">Remove Weight Class</button>
                <hr>
            `;

            weightClassesContainer.appendChild(newWeightClass);

            // Add event listener for removing the new weight class
            newWeightClass.querySelector('.remove-weight-class').addEventListener('click', function () {
                weightClassesContainer.removeChild(newWeightClass);
            });
        }

        // Add weight class button click handler
        addWeightClassBtn.addEventListener('click', function () {
            addWeightClassToForm();  // Add an empty weight class form
        });
    });


    $('#userSelect').on('change', function () {
        var userId = $(this).val();
        if (userId) {
            $.ajax({
                url: '/couriers/getUserSpecificPricing' / +userId,
                method: 'GET',

                success: function (response) {
                    // Clear the current prices
                    $('#price-table input').each(function () {
                        $(this).val('');
                    });

                    // Update the table with the received pricing data
                    $.each(response.prices, function (zoneId, weightClasses) {
                        $.each(weightClasses, function (weightClassId, price) {
                            var inputName = 'prices[' + zoneId + '][' + weightClassId + ']';
                            $('input[name="' + inputName + '"]').val(price);
                        });
                    });
                }
            });
        } else {
            // Clear prices if no user is selected
            $('#price-table input').each(function () {
                $(this).val('');
            });
        }
    });

</script>

@endsection