@extends('users.layouts.app')
@section('title', 'Booking Details')
@push('page-css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        .profile-card{background:#fff;border-radius:15px;box-shadow:0 0 10px rgba(0,0,0,.05);padding:25px}
        .status-btn{background-color:#6759FF;color:#fff;border-radius:999px;padding:8px 25px;font-weight:500;border:none;width:400px}
        .timeline{position:relative;padding-left:2px;border-left:2px solid #ddd}
        .timeline-item{position:relative;padding-bottom:20px;margin-left:10px;transition:all .3s ease}
        .timeline-item::before{content:'';position:absolute;left:-20px;top:0;width:14px;height:14px;background:#ddd;border-radius:50%;border:3px solid #fff}
        .timeline-item.active::before{background:#5F60FF}
        .btn{font-size:.875rem;font-weight:500}
        .btn-primary{background-color:#6759FF;border-color:#6759FF}
        .dashed-divider{border-top:1px dashed #333;margin-top:10px;margin-bottom:1rem}
        .dropdown-menu .dropdown-item.active{background-color:#6759FF!important;color:#fff!important;font-weight:600;border-radius:6px}
        .dropdown-menu .dropdown-item.active:hover{background-color:#6759FF!important;color:#fff!important}
        .badge-soft{background:#eef1f5;color:#2f3b52;border:1px solid #d0d5dd;border-radius:12px;padding:.15rem .5rem}
        .service-img{width:60px;height:60px;border-radius:12px;object-fit:cover}
    </style>
@endpush

@section('content')
    <div class="container" id="booking-details-wrapper">
        <div class="text-center my-5" id="loader">
            <div class="text-center w-100">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p class="mt-2">Loading...</p>
            </div>
        </div>
        <div id="work-validation-block" class="profile-card mb-4 d-none"></div>
    </div>

    <div class="modal fade" id="timeModal" tabindex="-1" aria-labelledby="timeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="timeModalLabel">Estimated Time</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="Enter Estimated Time">
                </div>
                <div class="modal-footer d-flex justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill fw-medium" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary btn-sm rounded-pill fw-medium">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="refundModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="refundModalLabel">Refund Job</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="refund-booking-id" name="booking_id">
                    <input type="hidden" id="refund-payment-intent-id" name="payment_intent_id">
                    <div class="mb-3">
                        <label for="refund-reason" class="form-label">Reason for Refund</label>
                        <textarea id="refund-reason" name="reason" class="form-control" placeholder="Enter refund reason..." rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill fw-medium" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-dark btn-sm rounded-pill fw-medium" id="submit-refund-btn">
                        <span class="btn-text">Refund</span>
                        <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="etaModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content p-3">
                <div class="modal-header">
                    <h5 class="modal-title">Enter Estimated Time</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="number" id="estimatedTimeInput" class="form-control" placeholder="Estimated time in minutes">
                </div>
                <div class="modal-footer">
                    <button type="button" id="etaSubmit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="disputeChatModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title">Dispute Chat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="disputeMessages" class="mb-3" style="max-height:50vh;overflow:auto;"></div>
                    <div class="border-top pt-3">
                        <textarea id="chatBody" class="form-control mb-2" rows="2" placeholder="Type message..."></textarea>
                        <input type="file" id="chatFiles" class="form-control mb-2" multiple>
                        <button id="sendChat" class="btn btn-primary rounded-pill">Send</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection