@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

@push('page-js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function() {
            const CURRENT_USER_ID = {{ auth()->id() ?? 'null' }};
            const CURRENT_USER_TYPE = "{{ auth()->user()->user_type ?? '' }}";
            const bookingId = window.location.pathname.split('/').pop();
            let currentDisputeId = null;

            function statusPill(s) {
                if (!s) return '';
                const l = s.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
                return `<span class="badge-soft text-uppercase">${l}</span>`
            }

            function fileUrl(a) {
                return a.url || (a.path ? (`/storage/${a.path}`) : '')
            }

            function assetTile(a) {
                const url = fileUrl(a);
                if ((a.type || '').startsWith('image/'))
                return `<a href="${url}" target="_blank"><img src="${url}" class="rounded-3 me-2 mb-2" width="90" height="90" style="object-fit:cover"></a>`;
                if ((a.type || '').startsWith('video/'))
                return `<a class="border rounded-3 p-2 small me-2 mb-2" href="${url}" target="_blank"><i class="bi bi-film"></i> ${a.name||'video'}</a>`;
                return `<a class="border rounded-3 p-2 small me-2 mb-2" href="${url}" target="_blank"><i class="bi bi-paperclip"></i> ${a.name||'file'}</a>`;
            }

            function renderValidation(v) {
                const el = $('#work-validation-block');
                let html =
                    `<div class="d-flex justify-content-between align-items-center mb-2"><div class="h5 mb-0">Work Validation</div>${statusPill(v?.status)}</div>`;
                if (v && v.assets && v.assets.length) {
                    html +=
                        `<div class="mb-2"><strong>Provider Note:</strong> ${v.provider_note||'-'}</div><div class="d-flex flex-wrap">${v.assets.map(assetTile).join('')}</div>`
                }
                if (CURRENT_USER_TYPE === 'provider' && (!v || v.status === 'awaiting_provider_submission')) {
                    html += `<div class="border rounded-3 p-3 mt-2">
        <div class="fw-semibold mb-2">Submit Proof</div>
        <textarea id="provider_note" class="form-control mb-2" rows="3" placeholder="Add notes..."></textarea>
        <input type="file" id="proof_files" class="form-control mb-2" multiple accept="image/*,video/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
        <div id="proofPreview" class="d-flex flex-wrap mb-2"></div>
        <div class="d-flex align-items-center gap-3">
          <button id="btnSubmitProof" class="btn btn-primary rounded-pill">Submit to User</button>
          <div id="uploadProgress" class="small text-muted"></div>
        </div>
        <div class="small text-muted mt-1">Max 10MB per file</div>
        <div class="mt-3"><button id="openDisputeProvider" class="btn btn-warning rounded-pill">Open Dispute</button></div>
      </div>`;
                } else {
                    html +=
                        `<div class="mt-2"><button id="openDisputeProvider" class="btn btn-warning rounded-pill">Open Dispute</button></div>`;
                }
                el.removeClass('d-none').html(html);
            }

            function loadValidation() {
                return $.get(`/api/booking/${bookingId}/validation`).done(r => renderValidation(r.validation)).fail(
                    () => renderValidation(null))
            }

            function loadMessages() {
                if (!currentDisputeId) return;
                $.get(`/api/disputes/${currentDisputeId}/messages`, function(r) {
                    const html = (r.messages || []).map(m => {
                        const mine = (m.author_id === CURRENT_USER_ID) && ((m.author_type || '')
                            .includes('Provider'));
                        const who = (m.author_type || '').split('\\').pop() || 'Actor';
                        const atts = (m.attachments || []).map(a =>
                            `<div><a href="${fileUrl(a)}" target="_blank">${a.name||'file'}</a></div>`
                            ).join('');
                        return `<div class="p-2 mb-2 ${mine?'bg-light rounded-3':''}"><div class="small text-muted">${who} • ${new Date(m.created_at).toLocaleString()}</div><div>${(m.body||'').replace(/\n/g,'<br>')}</div>${atts}</div>`;
                    }).join('');
                    $('#disputeMessages').html(html);
                });
            }

            $(document).on('change', '#proof_files', function() {
                const grid = $('#proofPreview');
                grid.empty();
                [...this.files].forEach(f => {
                    if (f.type.startsWith('image/')) {
                        const url = URL.createObjectURL(f);
                        grid.append(
                            `<img src="${url}" class="rounded-3 me-2 mb-2" width="90" height="90" style="object-fit:cover">`
                            )
                    } else {
                        grid.append(
                            `<div class="border rounded-3 p-2 small me-2 mb-2"><i class="bi bi-paperclip"></i> ${f.name}</div>`
                            )
                    }
                });
            });

            $(document).on('click', '#sendChat', function() {
                if (!currentDisputeId) return;
                const fd = new FormData();
                fd.append('body', $('#chatBody').val() || '');
                const files = $('#chatFiles')[0].files;
                for (let i = 0; i < files.length; i++) fd.append('attachments[]', files[i]);
                $.ajax({
                        url: `/api/disputes/${currentDisputeId}/messages`,
                        method: 'POST',
                        data: fd,
                        processData: false,
                        contentType: false
                    })
                    .done(function() {
                        $('#chatBody').val('');
                        $('#chatFiles').val('');
                        loadMessages()
                    });
            });

            $.ajax({
                    url: `/api/user/booking/details/${bookingId}`,
                    method: 'GET'
                })
                .done(function(response) {
                    const provider = response.provider || {};
                    const brand = (response.card && response.card.brand) || 'default';
                    const brandIcon = `<i class="fab fa-cc-${String(brand).toLowerCase()} fa-2x"></i>`;
                    const timelineHtml =
                        `<div class="timeline">${(response.timeline||[]).map((item,index)=>`
            <div class="timeline-item ${item.active?'active':''} ${index>=3?'d-none extra-timeline':''}">
              <h6 class="mb-1 fw-bold text-nowrap" style="max-width:200px;">${item.title||''}</h6>
              <small class="text-muted d-block mb-2">${item.time||''}</small>
              ${item.image?`<img src="${item.image}" class="rounded-4 mb-2" width="50" height="50"><small class="text-muted d-block">Provider is getting ready and will reach your place soon.</small>`:''}
            </div>`).join('')}</div>${(response.timeline||[]).length>5?`<div class="text-center mt-2"><button type="button" class="btn btn-sm btn-outline-primary toggle-timeline">View More</button></div>`:''}`;
                    const jobBlocks = `<div class="d-flex justify-content-between align-items-start flex-wrap">
          <div class="d-flex align-items-center gap-2 mb-3">${brandIcon}<div><div class="fw-bold">${String(brand).toUpperCase()}</div><div class="text-muted small">Payment Type: ${response.card?.type||'Via ScreenShot'}</div></div></div>
          <div class="d-flex gap-4 flex-wrap justify-content-end">${(response.services||[]).map(job=>`
                <div class="d-flex align-items-start text-end">
                  <img src="${job.image}" class="rounded-circle me-2 border" style="width:40px;height:40px;object-fit:cover;">
                  <div><h6 class="fw-bold mb-1">${job.name}</h6><div class="text-muted small">${job.price}</div></div>
                </div>`).join('')}
          </div></div>`;
                    const jobCard = `<div class="profile-card mb-4">
          <div class="d-flex justify-content-between align-items-start mb-3">
            <h5 class="mb-1 fw-semibold">Job Details</h5>
            <div class="border rounded-2 px-3 py-2 text-center" style="min-width:100px;">
              <div class="fw-bold fs-6">Job Type</div>
              <small>${response.services?.[0]?.price?.split(' ').slice(-1)[0]||''}</small>
            </div>
          </div>
          <hr class="dashed-divider">
          ${jobBlocks}
          <hr class="dashed-divider">
          <div class="d-flex justify-content-between flex-wrap">
            <div class="text-wrap mt-3 mt-md-0" style="max-width:500px;"><i class="bi bi-geo-alt-fill me-1"></i>${response.address||''}</div>
            <div class="text-end d-flex flex-column align-items-end gap-1">
              <div class="border rounded-2 px-2 py-1 small text-muted d-inline-block"><i class="bi bi-calendar3 me-1"></i>${response.date||''}</div>
              <div class="border rounded-2 px-2 py-1 small text-muted d-inline-block"><i class="bi bi-clock me-1"></i>${response.time||''}</div>
            </div>
          </div>
          <hr class="dashed-divider">
          <div class="mt-1 d-flex justify-content-between align-items-start">
            <div>
              <h6 class="mb-0 fw-bold">Total Amount</h6>
              ${response.discount_value>0?`<small class="badge bg-success d-block">Discount: -${response.discount_value}%</small>`:''}
            </div>
            <h4 class="text-primary mb-0">€${response.total_amount||0}</h4>
          </div>
          <small class="text-muted d-block mt-1">Note: Once your service is complete, the price will be displayed based on the hourly rate.</small>
          <div class="d-flex gap-2 mt-3">
            <button class="btn btn-outline-secondary btn-sm w-100 rounded-pill fw-medium cancel-job-btn" data-bs-toggle="modal" data-bs-target="#refundModal" data-booking-id="${bookingId}">Cancel Job</button>
            <button class="btn btn-primary btn-sm w-100 rounded-pill fw-medium" data-bs-toggle="modal" data-bs-target="#timeModal">Job Completed</button>
          </div>
        </div>`;
                    const html = `
        <h2 class="fw-bold mb-4">Booking Details</h2>
        <div class="profile-card mb-4 d-flex justify-content-between align-items-center flex-wrap">
          <div class="d-flex align-items-center">
            <img src="${provider.image}" class="rounded-circle me-3" style="width:50px;height:50px;object-fit:cover;">
            <div>
              <h5 class="mb-1 fw-semibold">${provider.name||''}</h5>
              <div class="text-muted">⭐ ${provider.rating||0} (${provider.reviews||0} reviews)</div>
              <small>${response.service_category||''}</small>
            </div>
          </div>
          <div class="dropdown mt-3 mt-md-0" data-booking-id="${bookingId}">
            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">${response.status?response.status.replace(/_/g,' ').replace(/\b\w/g,c=>c.toUpperCase()):'On The Way'}</button>
            <ul class="dropdown-menu">
              ${['accepted','on_the_way','completed','declined'].map(status=>{
                const label=status.replace(/_/g,' ').replace(/\b\w/g,c=>c.toUpperCase());
                const isActive=status.toLowerCase()===String(response.status).toLowerCase()?'active':'';
                return `<li><a class="dropdown-item status-option ${isActive}" href="#" data-status="${status}">${label}</a></li>`;
              }).join('')}
            </ul>
          </div>
        </div>
        <div class="row g-4">
          <div class="col-lg-8">${jobCard}</div>
          <div class="col-lg-4">
            <div class="profile-card mb-4">
              <div class="d-flex align-items-center mb-3"><i class="bi bi-clock-history me-2" style="color:#5F60FF"></i><h5 class="section-title mb-0">Activity Timeline</h5></div>
              ${timelineHtml}
            </div>
          </div>
        </div>`;
                    $('#booking-details-wrapper').html(html + $('#work-validation-block')[0].outerHTML);
                    $('#loader').remove();
                    loadValidation();
                })
                .fail(function() {
                    $('#booking-details-wrapper').html(
                        '<div class="alert alert-danger">Failed to load booking details.</div>')
                });

            $(document).on('click', '#btnSubmitProof', function() {
                const note = $('#provider_note').val() || '';
                const files = $('#proof_files')[0]?.files || [];
                const fd = new FormData();
                fd.append('provider_note', note);
                for (let i = 0; i < files.length; i++) fd.append('files[]', files[i]);
                $.ajax({
                        url: `/api/booking/${bookingId}/validation/submit`,
                        method: 'POST',
                        data: fd,
                        processData: false,
                        contentType: false,
                        xhr: function() {
                            const xhr = $.ajaxSettings.xhr();
                            if (xhr.upload) {
                                xhr.upload.addEventListener('progress', function(e) {
                                    if (e.lengthComputable) {
                                        $('#uploadProgress').text('Uploading ' + Math.round(
                                            (e.loaded / e.total) * 100) + '%')
                                    }
                                }, false)
                            }
                            return xhr;
                        }
                    }).done(function(r) {
                        $('#uploadProgress').text('');
                        Swal.fire('Submitted', r.message, 'success');
                        loadValidation()
                    })
                    .fail(function(e) {
                        $('#uploadProgress').text('');
                        Swal.fire('Error', e.responseJSON?.message || 'Failed', 'error')
                    });
            });

            $(document).on('click', '#openDisputeProvider', function() {
                Swal.fire({
                    title: 'Open a dispute',
                    input: 'textarea',
                    inputLabel: 'Details',
                    showCancelButton: true
                }).then(s => {
                    if (!s.isConfirmed) return;
                    $.post(`/api/booking/${bookingId}/disputes`, {
                            reason: 'Issue with delivered work',
                            details: s.value || ''
                        })
                        .done(d => {
                            currentDisputeId = d.dispute.id;
                            $('#disputeChatModal').modal('show');
                            loadMessages()
                        })
                        .fail(e => Swal.fire('Error', e.responseJSON?.message || 'Failed',
                        'error'));
                });
            });

            $(document).on('click', '.toggle-timeline', function() {
                const $btn = $(this),
                    $extra = $('.extra-timeline');
                if ($extra.is(':visible')) {
                    $extra.addClass('d-none');
                    $btn.text('View More')
                } else {
                    $extra.removeClass('d-none');
                    $btn.text('Show Less')
                }
            });

            $(document).on('click', '.status-option', function(e) {
                e.preventDefault();
                const newStatus = $(this).data('status');
                const formatted = newStatus.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
                const dropdown = $(this).closest('.dropdown');
                if (newStatus === 'on_the_way') {
                    $('#etaModal').modal('show');
                    $('#etaSubmit').off('click').on('click', function() {
                        const estimatedTime = $('#estimatedTimeInput').val().trim();
                        if (!estimatedTime) return;
                        $('#etaModal').modal('hide');
                        $.post(`/api/provider/booking/${bookingId}/update-status`, {
                                status: newStatus,
                                estimated_time: estimatedTime
                            })
                            .done(function() {
                                dropdown.find('button.dropdown-toggle').text(formatted)
                            });
                    });
                } else {
                    Swal.fire({
                            title: 'Are you sure?',
                            text: `Change status to "${formatted}"?`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Yes, update it!',
                            cancelButtonText: 'Cancel'
                        })
                        .then(res => {
                            if (!res.isConfirmed) return;
                            $.post(`/api/provider/booking/${bookingId}/update-status`, {
                                status: newStatus
                            }).done(function() {
                                dropdown.find('button.dropdown-toggle').text(formatted)
                            })
                        });
                }
            });

            $(document).on('click', '.cancel-job-btn', function() {
                const b = $(this).data('booking-id');
                $('#refund-booking-id').val(b);
                $('#refundModal').modal('show');
            });

            $('#submit-refund-btn').on('click', function() {
                const $btn = $(this),
                    $spinner = $btn.find('.spinner-border'),
                    $text = $btn.find('.btn-text');
                const reason = $('#refund-reason').val().trim();
                const b = $('#refund-booking-id').val();
                if (!reason) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Reason Required',
                        text: 'Please provide a reason for the refund.'
                    });
                    return
                }
                $btn.prop('disabled', true);
                $spinner.removeClass('d-none');
                $text.text('Processing...');
                $.post('/api/provider/booking/refunds', {
                        booking_id: b,
                        reason: reason
                    })
                    .done(function(r) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Refund Successful',
                            text: r.message
                        });
                        $(`.dropdown[data-booking-id="${b}"]`).find('button.dropdown-toggle').text(
                            'Canceled');
                        $('#refundModal').modal('hide')
                    })
                    .fail(function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Refund failed.'
                        })
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                        $spinner.addClass('d-none');
                        $text.text('Refund')
                    });
            });
        });
    </script>
@endpush