@extends('back.layouts.app', ['title' => 'SECR'])
@section('content')
<div class="content-wrapper pl-3 pr-2">

    {{-- Page Header --}}
    <section class="content-header">
        <div class="row align-items-center mb-3">
            <div class="col-md-12 text-end">
                @include('back.common_views.quicklinks')
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-md-6 col-sm-12">
                <h3 class="mb-0 font-weight-bold text-dark">
                    <i class="fas fa-recycle text-success mr-2"></i> Buy Back Valuation Requests
                    @if ($result->total() > 0)
                        <span class="badge badge-success ml-2" style="font-size: 12px; vertical-align: middle;">
                            {{ $result->total() }} Total
                        </span>
                    @endif
                </h3>
                <nav aria-label="breadcrumb" class="mt-2">
                    <ol class="breadcrumb bg-transparent p-0 mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ admin_url() }}"><i class="fas fa-home"></i> Dashboard</a>
                        </li>
                        <li class="breadcrumb-item active">Valuation Requests</li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>

    <section class="content mt-3">
        <div class="row">
            <div class="col-md-12">

                {{-- Filters Card --}}
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-body p-3">
                        <form method="get" action="{{ route('admin.valuations.index') }}" id="valuation_search_form">
                            <div class="row align-items-end g-3">
                                <div class="col-md-4">
                                    <label class="form-label font-weight-bold text-muted small">SEARCH BY NAME OR EMAIL</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                                        <input type="text" name="name" id="valuation-search-box"
                                            class="form-control border-left-0"
                                            placeholder="Type to search..."
                                            value="{{ request('name') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label font-weight-bold text-muted small">DATE RANGE</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-white"><i class="fas fa-calendar-alt text-muted"></i></span>
                                        <input type="text" name="dates" id="valuation-reportrange"
                                            class="form-control border-left-0"
                                            placeholder="All Time"
                                            value="{{ request('dates') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-primary px-4">
                                        <i class="fas fa-filter mr-1"></i> Apply Filters
                                    </button>
                                    <a href="{{ route('admin.valuations.index') }}" class="btn btn-outline-secondary px-4">
                                        <i class="fas fa-sync-alt mr-1"></i> Reset
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Table Card --}}
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3 border-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 font-weight-bold">
                                <i class="fas fa-list text-muted mr-2"></i> Requests Listing
                            </h5>
                            <div>
                                <button type="button"
                                    class="btn btn-sm btn-danger bulk_actions_btn"
                                    onclick="triggerValuationBulkAction('delete')"
                                    style="display:none;">
                                    <i class="fas fa-trash-alt mr-1"></i> Delete Selected
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-0">
                        <form method="post"
                            action="{{ route('admin.valuations.bulk_actions') }}"
                            id="bulk_actions_valuation_form">
                            @csrf
                            <input type="hidden" name="bulk_action" id="valuation_bulk_action" value="delete" />

                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0" id="valuations-table">
                                    <thead class="bg-light text-muted small">
                                        <tr>
                                            <th class="px-4" width="40">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="valuation_check_all">
                                                </div>
                                            </th>
                                            <th width="40"></th>
                                            <th width="80">ID</th>
                                            <th>NAME</th>
                                            <th>CONTACT INFO</th>
                                            <th>SERVICE / ASSETS</th>
                                            <th>SUBMITTED</th>
                                            <th class="text-center">ACTIONS</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($result as $row)
                                            <tr id="val-row-{{ $row->id }}">

                                                {{-- Checkbox --}}
                                                <td class="px-4">
                                                    <div class="form-check">
                                                        <input type="checkbox"
                                                            class="form-check-input valuation_check"
                                                            name="valuation_check[]"
                                                            value="{{ $row->id }}">
                                                    </div>
                                                </td>

                                                {{-- Expand toggle --}}
                                                <td class="text-center">
                                                    <a href="javascript:;" class="text-muted"
                                                        onclick="showme_page('#val-sub-{{ $row->id }}', this)">
                                                        <i class="fas fa-chevron-down"></i>
                                                    </a>
                                                </td>

                                                {{-- ID --}}
                                                <td class="font-weight-bold text-muted">#{{ $row->id }}</td>

                                                {{-- Name --}}
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="avatar-sm bg-light text-success rounded-circle mr-2 d-flex align-items-center justify-content-center"
                                                            style="width:32px;height:32px;font-weight:bold;font-size:14px;">
                                                            {{ strtoupper(substr($row->first_name, 0, 1)) }}
                                                        </div>
                                                        <div>
                                                            <span class="d-block font-weight-bold text-dark">
                                                                {{ $row->first_name }} {{ $row->last_name }}
                                                            </span>
                                                            @if ($row->company_name)
                                                                <small class="text-muted">{{ $row->company_name }}</small>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>

                                                {{-- Contact Info --}}
                                                <td>
                                                    <div class="small">
                                                        <a href="mailto:{{ $row->email }}" class="text-muted d-block">
                                                            <i class="far fa-envelope mr-1"></i> {{ $row->email }}
                                                        </a>
                                                        <a href="tel:{{ $row->phone }}" class="text-muted d-block">
                                                            <i class="fas fa-phone-alt mr-1"></i> {{ $row->phone }}
                                                        </a>
                                                    </div>
                                                </td>

                                                {{-- Service / Assets --}}
                                                <td>
                                                    <div class="small">
                                                        @if ($row->service_needed)
                                                            <span class="d-block text-dark">{{ $row->service_needed }}</span>
                                                        @endif
                                                        @if ($row->number_of_assets)
                                                            <span class="text-muted">{{ $row->number_of_assets }} assets</span>
                                                        @endif
                                                        @if ($row->asset_type)
                                                            <span class="d-block text-muted">{{ $row->asset_type }}</span>
                                                        @endif
                                                    </div>
                                                </td>

                                                {{-- Date --}}
                                                <td class="small text-muted">
                                                    <i class="far fa-calendar-alt mr-1"></i>
                                                    {{ $row->created_at ? $row->created_at->format('d M, Y') : '—' }}
                                                </td>

                                                {{-- Actions + hidden quick-view data --}}
                                                <td class="text-center">
                                                    <div class="btn-group">
                                                        <button type="button"
                                                            onclick="showValuationModal({{ $row->id }})"
                                                            class="btn btn-sm btn-outline-info"
                                                            title="Quick View">
                                                            <i class="fas fa-eye"></i>
                                                        </button>
                                                        <a href="{{ route('admin.valuations.show', $row->id) }}"
                                                            class="btn btn-sm btn-outline-primary"
                                                            title="Full Details">
                                                            <i class="fas fa-history"></i>
                                                        </a>
                                                    </div>

                                                    {{-- Hidden quick-view content --}}
                                                    <div style="display:none;" id="val-detail-{{ $row->id }}">
                                                        <div class="valuation-modal-body text-start">
                                                            <div class="row mb-3">
                                                                <div class="col-md-6">
                                                                    <label class="small text-muted mb-0">FULL NAME</label>
                                                                    <p class="font-weight-bold mb-0">{{ $row->first_name }} {{ $row->last_name }}</p>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="small text-muted mb-0">SUBMITTED</label>
                                                                    <p class="font-weight-bold mb-0">{{ $row->created_at ? $row->created_at->format('d M, Y') : '—' }}</p>
                                                                </div>
                                                            </div>
                                                            @if ($row->company_name)
                                                            <div class="row mb-3">
                                                                <div class="col-md-12">
                                                                    <label class="small text-muted mb-0">COMPANY</label>
                                                                    <p class="font-weight-bold mb-0">{{ $row->company_name }}</p>
                                                                </div>
                                                            </div>
                                                            @endif
                                                            <div class="row mb-3">
                                                                <div class="col-md-6">
                                                                    <label class="small text-muted mb-0">EMAIL</label>
                                                                    <p class="mb-0"><a href="mailto:{{ $row->email }}">{{ $row->email }}</a></p>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="small text-muted mb-0">PHONE</label>
                                                                    <p class="mb-0"><a href="tel:{{ $row->phone }}">{{ $row->phone }}</a></p>
                                                                </div>
                                                            </div>
                                                            @if ($row->service_needed || $row->number_of_assets || $row->asset_type)
                                                            <div class="row mb-3">
                                                                @if ($row->service_needed)
                                                                <div class="col-md-6">
                                                                    <label class="small text-muted mb-0">SERVICE NEEDED</label>
                                                                    <p class="mb-0">{{ $row->service_needed }}</p>
                                                                </div>
                                                                @endif
                                                                @if ($row->number_of_assets)
                                                                <div class="col-md-6">
                                                                    <label class="small text-muted mb-0">NUMBER OF ASSETS</label>
                                                                    <p class="mb-0">{{ $row->number_of_assets }}</p>
                                                                </div>
                                                                @endif
                                                            </div>
                                                            @if ($row->asset_type)
                                                            <div class="row mb-3">
                                                                <div class="col-md-12">
                                                                    <label class="small text-muted mb-0">ASSET TYPE</label>
                                                                    <p class="mb-0">{{ $row->asset_type }}</p>
                                                                </div>
                                                            </div>
                                                            @endif
                                                            @endif
                                                            @if ($row->preferred_pickup_date)
                                                            <div class="row mb-3">
                                                                <div class="col-md-12">
                                                                    <label class="small text-muted mb-0">PREFERRED PICKUP DATE</label>
                                                                    <p class="mb-0">{{ \Carbon\Carbon::parse($row->preferred_pickup_date)->format('M d, Y') }}</p>
                                                                </div>
                                                            </div>
                                                            @endif
                                                            @if ($row->additional_details)
                                                            <div class="bg-light p-3 rounded mb-3">
                                                                <label class="small text-muted font-weight-bold mb-2">ADDITIONAL DETAILS</label>
                                                                <p class="mb-0 text-dark" style="line-height:1.6;">{{ $row->additional_details }}</p>
                                                            </div>
                                                            @endif
                                                            @if ($row->equipment_list)
                                                            <div class="mb-3">
                                                                <label class="small text-muted mb-0">EQUIPMENT LIST FILE</label>
                                                                <p class="mb-0">
                                                                    <a href="{{ asset('uploads/valuations/equipment/' . $row->equipment_list) }}" target="_blank">
                                                                        <i class="fas fa-file-alt mr-1"></i> {{ $row->equipment_list }}
                                                                    </a>
                                                                </p>
                                                            </div>
                                                            @endif
                                                            @if ($row->product_images)
                                                                @php
                                                                    $imgs = is_array($row->product_images)
                                                                        ? $row->product_images
                                                                        : json_decode($row->product_images, true);
                                                                @endphp
                                                                @if (!empty($imgs))
                                                                <div class="mb-3">
                                                                    <label class="small text-muted mb-1">PRODUCT IMAGES</label>
                                                                    <div class="d-flex flex-wrap gap-2 mt-1">
                                                                        @foreach ($imgs as $img)
                                                                        <a href="{{ asset('uploads/valuations/images/' . $img) }}" target="_blank">
                                                                            <img src="{{ asset('uploads/valuations/images/' . $img) }}"
                                                                                alt="{{ $img }}"
                                                                                style="height:60px;width:60px;object-fit:cover;border-radius:4px;border:1px solid #ddd;">
                                                                        </a>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                                @endif
                                                            @endif
                                                            <hr class="my-2">
                                                            <small class="text-muted">
                                                                <i class="fas fa-network-wired mr-1"></i> IP: {{ $row->ip_address }}
                                                            </small>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            {{-- Expanded action row --}}
                                            <tr style="display:none;" id="val-sub-{{ $row->id }}" class="bg-light-actions">
                                                <td colspan="2"></td>
                                                <td colspan="6" class="py-3 px-4">
                                                    <div class="d-flex flex-wrap gap-2">
                                                        <a href="mailto:{{ $row->email }}" class="btn btn-sm btn-info text-white">
                                                            <i class="fas fa-reply mr-1"></i> Reply
                                                        </a>
                                                        <a href="{{ route('admin.valuations.show', $row->id) }}" class="btn btn-sm btn-primary">
                                                            <i class="fas fa-eye mr-1"></i> Full Details
                                                        </a>
                                                        <button type="button"
                                                            onclick="delValuationRecord({{ $row->id }})"
                                                            class="btn btn-sm btn-outline-danger ml-auto">
                                                            <i class="fas fa-trash-alt mr-1"></i> Delete
                                                        </button>
                                                    </div>
                                                    <div class="mt-2 small text-muted">
                                                        <i class="fas fa-network-wired mr-1"></i> IP: {{ $row->ip_address }}
                                                        @if ($row->referrer)
                                                            &nbsp;|&nbsp; <i class="fas fa-link mr-1"></i> Ref: {{ $row->referrer }}
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>

                                        @empty
                                            <tr>
                                                <td colspan="8" class="text-center py-5 text-muted">
                                                    <i class="fas fa-folder-open fa-3x mb-3 opacity-2"></i>
                                                    <p class="mb-0 font-weight-bold">No valuation requests found.</p>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>

                    <div class="card-footer bg-white border-0 py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="small text-muted">
                                @if ($result->total() > 0)
                                    Showing {{ $result->firstItem() }} to {{ $result->lastItem() }} of {{ $result->total() }} requests
                                @endif
                            </div>
                            <div>
                                {{ $result->links() }}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>

{{-- Quick View Modal --}}
<div class="modal fade" id="valuationDetailsModal" tabindex="-1" aria-labelledby="valuationDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="valuationDetailsModalLabel">
                    <i class="fas fa-recycle mr-2"></i> Valuation Request Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div id="valuationModalContainer"></div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('beforeBodyClose')
<style>
    #valuations-table th { letter-spacing: 0.05em; font-weight: 700; border-top: none; }
    #valuations-table td { padding-top: 1rem; padding-bottom: 1rem; vertical-align: middle; }
    .bg-light-actions { background-color: #fcfcfc !important; border-bottom: 2px solid #eee; }
    .gap-2 { gap: 0.5rem; }
</style>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="{{ asset_storage('lib/sweetalert/sweetalert2.js') }}"></script>
<script type="text/javascript" src="{{ asset_storage('') }}back/mod/mod_js.js"></script>

<script>
    // Date range picker
    (function () {
        var start = moment('01/01/2010', 'MM-DD-YYYY');
        var end   = moment();

        function cb(start, end) {
            $('#valuation-reportrange').val(start.format('YYYY-MM-DD') + '-' + end.format('YYYY-MM-DD'));
        }

        $('#valuation-reportrange').daterangepicker({
            startDate: start,
            endDate:   end,
            linkedCalendars: false,
            ranges: {
                'Today':        [moment(), moment()],
                'Yesterday':    [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days':  [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month':   [moment().startOf('month'), moment().endOf('month')],
                'Last Month':   [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);
    })();

    // Quick view modal
    function showValuationModal(id) {
        $('#valuationModalContainer').html($('#val-detail-' + id).html());
        $('#valuationDetailsModal').modal('show');
    }

    // Delete single record
    function delValuationRecord(id) {
        Swal.fire({
            title: 'Delete this request?',
            text:  'This action cannot be undone.',
            icon:  'warning',
            showCancelButton:     true,
            confirmButtonColor:   '#d33',
            cancelButtonColor:    '#6c757d',
            confirmButtonText:    'Yes, delete it'
        }).then(function (result) {
            if (result.isConfirmed) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
                $.ajax({
                    type: 'DELETE',
                    url:  '{{ admin_url() }}valuations/' + id,
                    data: { '_token': $('meta[name="csrf-token"]').attr('content') },
                    success: function (data) {
                        data = JSON.parse(data);
                        if (data.status) {
                            $('#val-row-' + id).fadeOut(400);
                            $('#val-sub-' + id).fadeOut(400);
                            $('#valuationDetailsModal').modal('hide');
                        }
                    }
                });
            }
        });
    }

    // Bulk select / deselect
    $('#valuation_check_all').on('change', function () {
        var checked = $(this).is(':checked');
        $('.valuation_check').prop('checked', checked);
        checkValuationBulkButtons();
    });

    $(document).on('change', '.valuation_check', function () {
        checkValuationBulkButtons();
    });

    function checkValuationBulkButtons() {
        var total   = $('.valuation_check').length;
        var checked = $('.valuation_check:checked').length;
        $('#valuation_check_all').prop('checked', total > 0 && checked === total);
        if (checked > 0) {
            $('.bulk_actions_btn').show();
        } else {
            $('.bulk_actions_btn').hide();
            $('#valuation_check_all').prop('checked', false);
        }
    }

    function triggerValuationBulkAction(action) {
        Swal.fire({
            title: 'Are you sure?',
            text:  'This will delete all selected requests.',
            icon:  'warning',
            showCancelButton:   true,
            confirmButtonColor: '#d33',
            confirmButtonText:  'Yes, delete selected'
        }).then(function (result) {
            if (result.isConfirmed) {
                $('#valuation_bulk_action').val(action);
                $('#bulk_actions_valuation_form').submit();
            }
        });
    }

    // Enter key submits search
    document.onkeydown = function (evt) {
        var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
        if (keyCode === 13) {
            $('#valuation_search_form').submit();
        }
    };
</script>
@endsection