@extends('back.layouts.app', ['title' => $title])
@section('content')
    <div class="pl-3 pr-2 content-wrapper">
        <section class="content-header">
            <div class="row">
                <div class="col-md-5 col-sm-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ admin_url() }}"> <i class="fas fa-tachometer-alt"></i> Home </a></li>
                        <li><a href="{{ admin_url() }}contact_request">Contact Leads</a></li>

                    </ol>
                    {{-- {!!getBC('Details',$bcArr)!!} --}}
                </div>
                <div class="col-md-7 col-sm-12">
                    @include('back.common_views.quicklinks')
                </div>
            </div>
        </section>

        <section class="content">
            <div class="row mb-3">
                <div class="col-md-12">
                    <div class="d-flex justify-content-between align-items-center bg-white p-3 rounded shadow-sm border-left-info">
                        <h4 class="mb-0">
                            <i class="fas fa-id-badge text-info mr-2"></i> Details of: <span class="text-primary font-weight-bold">{!! $result->name !!} {!! $result->lname !!}</span>
                        </h4>
                        <button onclick="editContactRequest({{ $result->id }});" class="btn btn-warning shadow-sm">
                            <i class="fas fa-edit mr-1"></i> Edit Lead
                        </button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-5">
                    <div class="card shadow-sm border-0 mb-4" id="contact_request_details">
                        <div class="card-header bg-white py-3">
                            <h5 class="mb-0 font-weight-bold"><i class="fas fa-info-circle text-primary mr-2"></i> Lead Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">First Name:</div>
                                <div class="col-sm-7 font-weight-bold" id="name">{{ $result->name }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Last Name:</div>
                                <div class="col-sm-7 font-weight-bold" id="lname">{{ $result->lname }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Email:</div>
                                <div class="col-sm-7 font-weight-bold" id="email"><a href="mailto:{{ $result->email }}">{{ $result->email }}</a></div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Phone:</div>
                                <div class="col-sm-7 font-weight-bold" id="phone"><a href="tel:{{ $result->phone }}">{{ $result->phone }}</a></div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Company:</div>
                                <div class="col-sm-7 font-weight-bold" id="company_name">{{ $result->company_name ?? '-' }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Address:</div>
                                <div class="col-sm-7 font-weight-bold" id="address">{{ $result->address ?? '-' }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">City/State:</div>
                                <div class="col-sm-7 font-weight-bold" id="city_state">{{ $result->city ?? '-' }}, {{ $result->state ?? '-' }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Zip Code:</div>
                                <div class="col-sm-7 font-weight-bold" id="zip_code">{{ $result->zip_code ?? '-' }}</div>
                            </div>
                            <hr>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Subject:</div>
                                <div class="col-sm-7 font-weight-bold" id="subject">{{ $result->subject }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Tax Exempt:</div>
                                <div class="col-sm-7 font-weight-bold" id="tax_exempt">{{ $result->tax_exempt ?? 'No' }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Lead Cost:</div>
                                <div class="col-sm-7 font-weight-bold text-success" id="price">${{ number_format($result->price, 2) }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-5 text-muted">Enrolled Date:</div>
                                <div class="col-sm-7 font-weight-bold" id="dated">{{ date('d M, Y', strtotime($result->dated)) }}</div>
                            </div>
                            
                            <div class="mt-4">
                                <label class="text-muted mb-2">Comments:</label>
                                <textarea class="form-control bg-light" rows="5" readonly style="resize: none;" id="comments">{{ $result->comments }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-7">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-header bg-white py-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0 font-weight-bold"><i class="fas fa-history text-success mr-2"></i> Activity History</h5>
                                <div class="btn-group">
                                    @if ($pre)
                                        <a href="{{ route('contact_request.show', [$pre->id]) }}" class="btn btn-outline-secondary btn-sm" title="Previous Lead">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    @endif
                                    @if ($next)
                                        <a href="{{ route('contact_request.show', [$next->id]) }}" class="btn btn-outline-secondary btn-sm" title="Next Lead">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="tracking-list p-4">
                                @if(count($history) > 0)
                                    @foreach ($history as $key => $val)
                                        <div class="tracking-item">
                                            <div class="tracking-icon {{ $val->ref == 4 ? 'bg-danger' : 'bg-info' }}">
                                                @if ($val->ref == 1)
                                                    <i class="fas fa-dollar-sign text-white"></i>
                                                @elseif($val->ref == 2)
                                                    <i class="fas fa-user-plus text-white"></i>
                                                @elseif($val->ref == 3)
                                                    <i class="fas fa-envelope text-white"></i>
                                                @else
                                                    <i class="fas fa-pen text-white"></i>
                                                @endif
                                            </div>
                                            <div class="tracking-date">
                                                <div class="font-weight-bold text-dark">{{ format_date($val->created_at, 'date') }}</div>
                                                <small class="text-muted">{{ format_date($val->created_at, 'time_only') }}</small>
                                            </div>
                                            <div class="tracking-content shadow-sm border">
                                                <p class="mb-1">{{ $val->msg }}</p>
                                                <small class="text-muted">
                                                    Action by <span class="text-primary font-weight-bold" data-toggle="tooltip" title="{{ $val->admin->email }}">{{ $val->admin->name }}</span>
                                                </small>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="text-center py-5 text-muted">
                                        <i class="fas fa-info-circle fa-3x mb-3 opacity-2"></i>
                                        <p>No activity history found for this lead.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                        @if(count($history) > 0)
                        <div class="card-footer bg-white border-0">
                            {!! $history->links() !!}
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="editContactRequestModal" tabindex="-1" role="dialog"
        aria-labelledby="editContactRequestModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editContactRequestModalLabel">Edit Contact Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="editContactRequestModalBody">
                    @include('back.contactus.edit_contact_request')
                </div>
            </div>
        </div>
    </div>
@endsection
@section('beforeBodyClose')
    <style type="text/css">
        .border-left-info { border-left: 5px solid #17a2b8 !important; }
        .tracking-detail {
            padding: 3rem 0
        }
        .card { border-radius: 12px; }
        .card-header { border-bottom: 1px solid rgba(0,0,0,.05); }
        
        #comments {
            border: 1px solid #e9ecef;
            background-color: #fbfbfb !important;
            border-radius: 10px;
            padding: 15px;
            color: #495057;
            line-height: 1.6;
            font-size: 14px;
        }

        #tracking {
            margin-bottom: 1rem
        }

        [class*=tracking-status-] p {
            margin: 0;
            font-size: 1.1rem;
            color: #fff;
            text-transform: uppercase;
            text-align: center
        }

        [class*=tracking-status-] {
            padding: 1.6rem 0
        }

        .tracking-status-intransit {
            background-color: #65aee0
        }

        .tracking-status-outfordelivery {
            background-color: #f5a551
        }

        .tracking-status-deliveryoffice {
            background-color: #f7dc6f
        }

        .tracking-status-delivered {
            background-color: #4cbb87
        }

        .tracking-status-attemptfail {
            background-color: #b789c7
        }

        .tracking-status-error,
        .tracking-status-exception {
            background-color: #d26759
        }

        .tracking-status-expired {
            background-color: #616e7d
        }

        .tracking-status-pending {
            background-color: #ccc
        }

        .tracking-status-inforeceived {
            background-color: #214977
        }

        .tracking-list {
            border: 1px solid #e5e5e5
        }

        .tracking-item {
            border-left: 1px solid #e5e5e5;
            position: relative;
            padding: 2rem 1.5rem .5rem 2.5rem;
            font-size: .9rem;
            margin-left: 3rem;
            min-height: 5rem
        }

        .tracking-item:last-child {
            padding-bottom: 4rem
        }

        .tracking-item .tracking-date {
            margin-bottom: .5rem
        }

        .tracking-item .tracking-date span {
            color: #888;
            font-size: 85%;
            padding-left: .4rem
        }

        .tracking-item .tracking-content {
            padding: 1.2rem;
            background-color: #fff;
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .tracking-item .tracking-content:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
        }

        .tracking-item .tracking-content span {
            display: block;
            color: #888;
            font-size: 85%
        }

        .tracking-item .tracking-icon {
            line-height: 2.6rem;
            position: absolute;
            left: -1.3rem;
            width: 2.6rem;
            height: 2.6rem;
            text-align: center;
            border-radius: 50%;
            font-size: 1.1rem;
            color: #fff;
            z-index: 2;
            box-shadow: 0 2px 6px rgba(0,0,0,.15);
        }

        .tracking-item .tracking-icon.status-sponsored {
            background-color: #f68
        }

        .tracking-item .tracking-icon.status-delivered {
            background-color: #4cbb87
        }

        .tracking-item .tracking-icon.status-outfordelivery {
            background-color: #f5a551
        }

        .tracking-item .tracking-icon.status-deliveryoffice {
            background-color: #f7dc6f
        }

        .tracking-item .tracking-icon.status-attemptfail {
            background-color: #b789c7
        }

        .tracking-item .tracking-icon.status-exception {
            background-color: #d26759
        }

        .tracking-item .tracking-icon.status-inforeceived {
            background-color: #214977
        }

        .tracking-item .tracking-icon.status-intransit {
            color: #e5e5e5;
            border: 1px solid #e5e5e5;
            font-size: .6rem
        }

        @media(min-width:992px) {
            .tracking-item {
                margin-left: 8rem
            }

            .tracking-item .tracking-date {
                position: absolute;
                left: -10rem;
                width: 7.5rem;
                text-align: right
            }

            .tracking-item .tracking-date span {
                display: block
            }

            .tracking-item .tracking-content {
                padding: 0;
                background-color: transparent
            }
        }
    </style>
    <script>
        function editContactRequest(id) {
            fetch('{{ admin_url() }}get_contact_request_to_edit/' + id)
                .then(contatUsRequest => {
                    return contatUsRequest.json();
                })
                .then(contatUsRequest => {
                    const form = $('#edit_contact_request_form');
                    form.find('#id').val(contatUsRequest.id);
                    form.find('#name').val(contatUsRequest.name);
                    form.find('#lname').val(contatUsRequest.lname);
                    form.find('#email').val(contatUsRequest.email);
                    form.find('#phone').val(contatUsRequest.phone);
                    form.find('#address').val(contatUsRequest.address);
                    form.find('#city').val(contatUsRequest.city);
                    form.find('#state').val(contatUsRequest.state);
                    form.find('#zip_code').val(contatUsRequest.zip_code);
                    form.find('#company_name').val(contatUsRequest.company_name);
                    form.find('#price').val(contatUsRequest.price);
                    form.find('#tax_exempt').val(contatUsRequest.tax_exempt || 'No');
                    form.find('#subject').val(contatUsRequest.subject);
                    form.find('#service').val(contatUsRequest.service);
                    form.find('#comments').val(contatUsRequest.comments);
                    form.find('#dated').val(getFormattedDateToEdit(contatUsRequest.dated));

                    $('#editContactRequestModal').modal('show');
                });
        }

        function updateContactRequest() {
            const formElement = document.getElementById('edit_contact_request_form');
            const formData = new FormData(formElement);
            
            fetch('{{ admin_url() }}update_contact_request', {
                    method: "POST",
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                })
                .then(response => response.json())
                .then(jsonResponse => {
                    if (jsonResponse.status) {
                        const lead = jsonResponse.contatUsRequestObj;
                        const details = $('#contact_request_details');
                        
                        // Update UI fields
                        details.find('#name').text(lead.name || '');
                        details.find('#lname').text(lead.lname || '');
                        details.find('#email a').text(lead.email || '').attr('href', 'mailto:' + lead.email);
                        details.find('#phone a').text(lead.phone || '').attr('href', 'tel:' + lead.phone);
                        details.find('#company_name').text(lead.company_name || '-');
                        details.find('#address').text(lead.address || '-');
                        details.find('#city_state').text((lead.city || '-') + ', ' + (lead.state || '-'));
                        details.find('#zip_code').text(lead.zip_code || '-');
                        details.find('#subject').text(lead.subject || '');
                        details.find('#tax_exempt').text(lead.tax_exempt || 'No');
                        details.find('#price').text('$' + parseFloat(lead.price || 0).toLocaleString(undefined, {minimumFractionDigits: 2}));
                        details.find('#dated').text(getFormattedDate(lead.dated));
                        details.find('#comments').val(lead.comments || '');

                        $('#editContactRequestModal').modal('hide');
                        
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Lead details updated successfully',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload(); // Reload to show new history entry
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while updating the lead.');
                });
        }

        function getFormattedDate(date) {
            if (!date) return '';
            const d = new Date(date);
            const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
            return d.getDate() + ' ' + months[d.getMonth()] + ', ' + d.getFullYear();
        }

        function getFormattedDateToEdit(date) {
            if (!date) return '';
            const d = new Date(date);
            let month = '' + (d.getMonth() + 1);
            let day = '' + d.getDate();
            const year = d.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;

            return [year, month, day].join('-');
        }
    </script>
@endsection