@extends('layouts.user_type.auth')

@section('content')
<style>
    .px-12{
        padding-left: 40rem !important;
        padding-right: 16rem !important;
    }

    /* For large desktops and laptops */
    @media (max-width: 1200px) {
        .px-12 {
            padding-left: 30rem !important;
            padding-right: 12rem !important;
        }
    }

    /* For tablets and smaller desktops */
    @media (max-width: 992px) {
        .px-12 {
            padding-left: 20rem !important;
            padding-right: 8rem !important;
        }
    }

    /* For small tablets and large phones */
    @media (max-width: 768px) {
        .px-12 {
            padding-left: 10rem !important;
            padding-right: 4rem !important;
        }
    }

    /* For mobile phones */
    @media (max-width: 576px) {
        .px-12 {
            padding-left: 5rem !important;
            padding-right: 2rem !important;
        }
    }
</style>
<div>
    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-header pb-0 px-12">
                <h4 class="mb-0">{{ __('Shipment Details') }}</h4>
            </div>
            <div class="card-body pt-4 p-3">
                <form action="{{ route('shipment.update', $shipment->id) }}" method="POST" role="form text-left">
                    @method('PUT')
                    @csrf
                    @if($errors->any())
                        <div class="mt-3  alert alert-primary alert-dismissible fade show" role="alert">
                            <span class="alert-text text-white">
                            {{$errors->first()}}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <i class="fa fa-close" aria-hidden="true"></i>
                            </button>
                        </div>
                    @endif
                    @if(session('success'))
                        <div class="m-3  alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                            <span class="alert-text text-white">
                            {{ session('success') }}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <i class="fa fa-close" aria-hidden="true"></i>
                            </button>
                        </div>
                    @endif
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="branches" class="form-control-label">{{ __('Branches') }}</label>
                                <div class="@error('branches')border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="branches" id="branches">
                                        <option value="">Select Branches</option>
                                        @foreach($branchdata as $branch)
                                            <option value="{{ $branch->id }}"{{ $branch->id == $shipment->branches ? 'selected' : '' }}>{{ $branch->name }} ({{ $branch->email }})</option>
                                        @endforeach
                                    </select>
                                    @error('branch')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="vendor" class="form-control-label">{{ __('Vendors') }}</label>
                                <div class="@error('vendor')border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="vendor" id="vendor" required>
                                        <option value="">Select Vendor</option>
                                        @foreach($vendordata as $vendor)
                                            <option value="{{ $vendor->id }}"{{ $vendor->id == $shipment->vendors ? 'selected' : '' }}>{{ $vendor->name }} ({{ $vendor->email }})</option>
                                        @endforeach
                                    </select>
                                    @error('vendor')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="customer" class="form-control-label">{{ __('Customers') }}</label>
                                <div class="@error('email')border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="customer" id="customer" required>
                                        <option value="">Select Customer</option>
                                        @foreach($userdata as $user)
                                        <option value="{{ $user->id }}" {{ $user->id == $shipment->customers ? 'selected' : '' }}>{{ $user->name }} ({{ $user->email }})</option>
                                        @endforeach
                                    </select>
                                    @error('customer')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="vendoraddress" class="form-control-label">{{ __('Vendor Address') }}</label>
                                <div class="@error('vendoraddress') border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="vendoraddress" id="vendoraddress" required>
                                        <option value="">Select Vendor Address</option>
                                    </select>
                                    @error('vendoraddress')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                                <button type="button" class="btn btn-primary btn-md mt-3 mb-3" data-bs-toggle="modal" data-bs-target="#addVendorAddressModal">
                                    Add Vendor Address
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="customeraddress" class="form-control-label">{{ __('Customer Address') }}</label>
                                <div class="@error('customeraddress')border border-danger rounded-3 @enderror">
                                    <select class="form-control" name="customeraddress" id="customeraddress" required>
                                        <option value="">Select Customer Address</option>
                                    </select>
                                    @error('customeraddress')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                                <button type="button" class="btn btn-primary btn-md mt-3 mb-3" data-bs-toggle="modal" data-bs-target="#addCustomerAddressModal">
                                    Add Customer Address
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="card-header pb-0 pt-0 px-12">
                        <h4 class="mb-0 mt-4">{{ __('Payment') }}</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="payment" class="form-control-label">{{ __('Payment Type') }}</label>
                                <select class="form-control" name="payment" id="payment" required>
                                    <option value="">Select Payement type</option>
                                    <option value="prepaid" {{ $shipment->payment_type == 'prepaid' ? 'selected' : '' }}>Prepaid</option>
                                    <option value="postpaid" {{ $shipment->payment_type == 'postpaid' ? 'selected' : '' }}>Postpaid</option>
                                </select>
                                @error('payment')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="paymentmethod" class="form-control-label">{{ __('Payment Method') }}</label>
                                <select class="form-control" name="paymentmethod" id="paymentmethod">
                                    <option value="">Select Payment Method</option>
                                    <option value="online" {{ $shipment->payment_method == 'online' ? 'selected' : '' }}>Online</option>
                                    <option value="credit-card" {{ $shipment->payment_method == 'credit-card' ? 'selected' : '' }}>Credit Card</option>
                                    <option value="stripe" {{ $shipment->payment_method == 'stripe' ? 'selected' : '' }}>Stripe</option>
                                    <option value="upi" {{ $shipment->payment_method == 'upi' ? 'selected' : '' }}>UPI</option>
                                </select>
                                @error('paymentmethod')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="card-header pb-0 pt-0 px-12">
                        <h4 class="mb-0 mt-4">{{ __('Package Information') }}</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="package" class="form-control-label">{{ __('Package') }}</label>
                                <div class="@error('package') border border-danger rounded-3 @enderror">
                                    <textarea class="form-control" placeholder="Enter package" id="package" name="package" rows="3">{{ $shipment->package }}</textarea>
                                </div>
                                @error('package')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="street" class="form-control-label">{{ __('Description') }}</label>
                                <div class="@error('description')border border-danger rounded-3 @enderror">
                                    <textarea class="form-control" placeholder="Enter description" id="description" name="description" rows="3">{{ $shipment->description }}</textarea>
                                </div>
                                @error('description')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="quantity" class="form-control-label">{{ __('Quantity') }}</label>
                                <div class="@error('quantity') border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="number" placeholder="Enter Quantity" id="quantity" name="quantity" value="{{ $shipment->quantity }}">
                                </div>
                                @error('quantity')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="weight" class="form-control-label">{{ __('Weight') }}</label>
                                <div class="@error('weight') border border-danger rounded-3 @enderror">
                                    <div class="input-group">
                                        <input class="form-control" type="text" placeholder="Enter Weight" id="weight" name="weight" value="{{ old('weight', $weightValue) }}" required>
                                        <select class="form-select form-select-sm" name="weight_unit" id="weight_unit">
                                            <option value="KG" {{ old('weight_unit', $weightUnit) == 'KG' ? 'selected' : '' }}>KG</option>
                                            <option value="TON" {{ old('weight_unit', $weightUnit) == 'TON' ? 'selected' : '' }}>TON</option>
                                        </select>
                                    </div>
                                    @error('weight')
                                        <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="card-header pb-0 pt-0 px-12">
                        <h4 class="mb-0 mt-4">{{ __('Delivery Time') }}</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="deliverytime" class="form-control-label">{{ __('Delivery Till') }}</label>
                                <div class="@error('deliverytime') border border-danger rounded-3 @enderror">
                                    <input class="form-control" type="date" placeholder="Select delivery time" id="deliverytime" name="deliverytime" value="{{ $shipment->delivery_till }}">
                                </div>
                                @error('deliverytime')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        @if (auth()->user()->role_id == 1)
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status" class="form-control-label">{{ __('Status') }}</label>
                                    <div class="@error('status')border border-danger rounded-3 @enderror">
                                        <select class="form-control" name="status" id="status" required>
                                            <option value="">Select Status</option>
                                            <option value="Order Received" {{ $shipment->status == 'Order Received' ? 'selected' : '' }}>Order Received</option>
                                            <option value="Order Picked" {{ $shipment->status == 'Order Picked' ? 'selected' : '' }}>Order Picked</option>
                                            <option value="Out for Delivery" {{ $shipment->status == 'Out for Delivery' ? 'selected' : '' }}>Out for Delivery</option>
                                            <option value="Order In Transit" {{ $shipment->status == 'Order In Transit' ? 'selected' : '' }}>Order In Transit</option>
                                            <option value="Reached Destination" {{ $shipment->status == 'Reached Destination' ? 'selected' : '' }}>Reached Destination</option>
                                        </select>
                                        @error('status')
                                            <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">{{ 'Save' }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Add Vendor Address Modal -->
<div class="modal fade" id="addVendorAddressModal" tabindex="-1" aria-labelledby="addVendorAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addVendorAddressModalLabel">Add Vendor Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('vendorAddress.store') }}" method="POST" id="vendorAddressForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="selectvendor" class="form-label">Select Vendor</label>
                        <select class="form-control" name="vendor" id="vendor" required>
                            <option value="">Select Vendor</option>
                            @foreach($vendordata as $vendor)
                                <option value="{{ $vendor->id }}">{{ $vendor->name }} ({{ $vendor->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="address" class="form-label">Address</label>
                        <input class="form-control" type="tel" placeholder="Address" id="address" name="address" value="" required>
                    </div>
                    <div class="mb-3">
                        <label for="customerCountry" class="form-label">Select Country</label>
                        <select class="form-control" name="location" id="location" required>
                            <option value="">Select Country</option>
                            @foreach($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="customerState" class="form-label">Select State</label>
                        <select class="form-control" name="state" id="state" required>
                            <option value="">Select a State/Province</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="customerCity" class="form-label">City</label>
                        <input class="form-control" type="text" placeholder="City" id="city" name="city" value="" required>
                    </div>
                    <div class="mb-3">
                        <label for="customerStreet" class="form-label">Street</label>
                        <input class="form-control" type="tel" placeholder="Suits/Street" id="street" name="street" value="" required>
                    </div>
                    <div class="mb-3">
                        <label for="customerPostalcode" class="form-label">ZIP/Postal Code</label>
                        <input class="form-control" type="text" placeholder="ZIP/Postal Code" id="postalcode" name="postalcode" value="" required>
                    </div>
                    <div class="mb-3">
                        <label for="customerPhone" class="form-label">Phone</label>
                        <input class="form-control" type="tel" placeholder="Phone EX:9800097000" id="phone" name="phone" value="" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Address</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Customer Address Modal -->
<div class="modal fade" id="addCustomerAddressModal" tabindex="-1" aria-labelledby="addCustomerAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCustomerAddressModalLabel">Add Customer Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('address.store') }}" method="POST" id="customerAddressForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="vendorSelectCustomer" class="form-label">Customer</label>
                        <select class="form-control" name="customer" id="customer" required>
                            <option value="">Select Customer</option>
                            @foreach($userdata as $user)
                                <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="address" class="form-label">Address</label>
                        <input class="form-control" type="tel" placeholder="Address" id="address" name="address" value="" required>
                    </div>
                    <div class="mb-3">
                        <label for="userlocation" class="form-label">Select Country</label>
                        <select class="form-control" name="location" id="userlocation" required>
                            <option value="">Select Country</option>
                            @foreach($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="customerState" class="form-label">Select State</label>
                        <select class="form-control" name="state" id="userstate">
                            <option value="">Select a State/Province</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="customerCity" class="form-label">City</label>
                        <input class="form-control" type="text" placeholder="City" id="city" name="city" value="">
                    </div>
                    <div class="mb-3">
                        <label for="customerStreet" class="form-label">Street</label>
                        <input class="form-control" type="tel" placeholder="Suits/Street" id="street" name="street" value="" required>
                    </div>
                    <div class="mb-3">
                        <label for="customerPostalcode" class="form-label">ZIP/Postal Code</label>
                        <input class="form-control" type="text" placeholder="ZIP/Postal Code" id="postalcode" name="postalcode" value="">
                    </div>
                    <div class="mb-3">
                        <label for="customerPhone" class="form-label">Phone</label>
                        <input class="form-control" type="tel" placeholder="Phone EX:9800097000" id="phone" name="phone" value="" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Address</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Fetch vendor addresses when vendor changes
        $('#vendor').on('change', function() {
            var vendorId = $(this).val();

            // Clear the existing options
            $('#vendoraddress').empty().append('<option value="">Select Vendor Address</option>');

            if (vendorId) {
                var baseUrl = "{{ url('') }}";
                $.ajax({
                    url: baseUrl + '/public/fetch-vendor-addresses/' + vendorId,
                    type: 'GET',
                    success: function(data) {
                        if (data.length > 0) {
                            $.each(data, function(index, address) {
                                $('#vendoraddress').append('<option value="' + address.id + '">' + address.full_address + '</option>');
                            });

                            // Set the pre-selected address if available
                            @if(isset($vendorAddresses))
                                $('#vendoraddress').val('{{ $vendorAddresses }}').change();
                            @endif
                        }
                    },
                    error: function(xhr) {
                        console.error('Error fetching addresses:', xhr);
                    }
                });
            }
        });

        // Fetch customer addresses when customer changes
        $('#customer').on('change', function() {
            var customerId = $(this).val();

            // Clear the existing options
            $('#customeraddress').empty().append('<option value="">Select Customer Address</option>');

            if (customerId) {
                var baseUrl = "{{ url('') }}";
                $.ajax({
                    url: baseUrl + '/arts-qatar/public/fetch-customer-addresses/' + customerId,
                    type: 'GET',
                    success: function(data) {
                        if (data.length > 0) {
                            $.each(data, function(index, address) {
                                $('#customeraddress').append('<option value="' + address.id + '">' + address.full_address + '</option>');
                            });

                            // Set the pre-selected address if available
                            @if(isset($customerAddresses))
                                $('#customeraddress').val('{{ $customerAddresses }}').change();
                            @endif
                        }
                    },
                    error: function(xhr) {
                        console.error('Error fetching addresses:', xhr);
                    }
                });
            }
        });

        // Trigger the change event on page load to populate and select the addresses
        $('#vendor').trigger('change');
        $('#customer').trigger('change');
    });

    // For add addresses by the popup
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('vendorAddressForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
        });

        document.getElementById('customerAddressForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
        });
    });

    // For vendor state select based on country
    document.addEventListener('DOMContentLoaded', function() {
        const states = @json($states);

        document.getElementById('location').addEventListener('change', function() {
            const countryId = this.value;
            const stateSelect = document.getElementById('state');

            stateSelect.innerHTML = '<option value="">Select a State/Province</option>';

            const filteredStates = states.filter(state => state.country_id == countryId);

            filteredStates.forEach(state => {
                const option = document.createElement('option');
                option.value = state.name;
                option.textContent = state.name;
                stateSelect.appendChild(option);
            });
        });
    });

    // For customer state select based on country
    document.addEventListener('DOMContentLoaded', function() {
        const states = @json($states);

        document.getElementById('userlocation').addEventListener('change', function() {
            const countryId = this.value;
            const stateSelect = document.getElementById('userstate');

            stateSelect.innerHTML = '<option value="">Select a State/Province</option>';

            const filteredStates = states.filter(state => state.country_id == countryId);

            filteredStates.forEach(state => {
                const option = document.createElement('option');
                option.value = state.name;
                option.textContent = state.name;
                stateSelect.appendChild(option);
            });
        });
    });
</script>
@endsection