@extends('front.layouts-user.master')

@section('title', 'Cancel Shipment')

@section('content')

    <style>
        .cancel-btn {
            background-color: #FF7101;
            color: white;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease-in-out;
        }

        .cancel-btn:hover {
            background-color: #E86500;
            transform: scale(1.02);
        }

        .back-btn {
            border: 2px solid #FF7101;
            color: #FF7101;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease-in-out;
        }

        .back-btn:hover {
            background-color: #FF7101;
            color: white;
            transform: scale(1.02);
        }

        .hover-text {
            transition: color 0.3s ease-in-out;
        }

        .hover-text:hover {
            color: #FF7101;
        }
    </style>

    <div class="container d-flex justify-content-center align-items-center" style="margin-top: 30px;">
        <div class="card border-0 shadow-lg p-4" style="width: 1800px; border-radius: 16px;">
            <div class="alert d-flex align-items-center p-3"
                style="border-radius: 12px; background-color: rgba(255, 113, 1, 0.1); color: #FF7101;">
                <i class="fas fa-exclamation-triangle me-2" style="font-size: 1.5rem;"></i>
                <div>
                    <h6 class="fw-bold mb-1">Attention!</h6>
                    <p class="mb-0" style="font-size: 0.9rem;">
                        We take cancellations very seriously. Your request will be reviewed within <strong>72
                            hours</strong>. You will receive an email update.
                    </p>
                </div>
            </div>

            <hr class="my-3">

            <h5 class="text-center fw-bold" style="color: #FF7101;">Do you really want to cancel this shipment?</h5>

            <p class="text-muted text-center hover-text" style="font-size: 0.9rem;">
                Provide a valid reason for cancellation. Your request will be reviewed before approval.
            </p>

            <form id="cancelShipmentForm">
                @csrf

                <input type="hidden" name="shipment_id" value="{{ $id }}">
                <div class="mb-3">
                    <label class="fw-semibold">Cancellation Reason</label>
                    <textarea class="form-control shadow-sm" name="reason" rows="4" placeholder="Enter your reason here..." required
                        style="border-radius: 10px; font-size: 0.9rem;"></textarea>
                    <div class="invalid-feedback"></div>
                </div>

                <button type="submit" class="btn cancel-btn w-100 fw-bold py-2">
                    <i class="fas fa-times-circle me-2"></i> Submit Cancellation
                </button>
            </form>

            <a href="{{ route('front.viewTransporterShipment') }}" class="btn back-btn w-100 mt-3 fw-bold py-2">
                <i class="fas fa-arrow-left me-2"></i> Back to Bookings
            </a>

            <p class="text-muted mt-4 text-center hover-text" style="font-size: 0.85rem;">
                Need help? <a href="#" class="fw-bold" style="color: #FF7101;">Contact Support</a>
            </p>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#cancelShipmentForm').submit(function(e) {
                e.preventDefault();
                let form = $(this);
                let submitButton = $('.cancel-btn');

                submitButton.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin"></i> Processing...');

                $.ajax({
                    url: '{{ route('user.cancellation') }}',
                    type: 'POST',
                    data: form.serialize(),
                   success: function(response) {
                        Swal.fire({
                            title: "Success!",
                            text: "Cancellation request submitted successfully.",
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then(() => {
                            window.location.href = '{{ route('front.viewTransporterShipment') }}';
                        });
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        $('.invalid-feedback').text(errors.reason ? errors.reason[0] : '')
                            .show();
                        $('textarea[name="reason"]').addClass('is-invalid');
                        submitButton.prop('disabled', false).html(
                            '<i class="fas fa-times-circle me-2"></i> Submit Cancellation');
                    }
                });
            });
        });
    </script>
@endpush