@extends('admin.layout.app')
@section('title', 'Manage Inventory')
@section('meta_description', 'List of all cars available for sale/rent. Edit or delete listings.')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <h1 class="admin-title mb-3">My listing</h1>

                            <div class="tfcl-dashboard-middle mt-2">
                                <div class="row">
                                    <div class="tfcl-dashboard-middle-left col-md-12">
                                        <form action="{{ route('admin.listings.index') }}" method="GET"
                                              id="filter-form">
                                            <div class="tfcl-dashboard-listing">
                                                <div class="row">
                                                    <div class="col-xl-3 col-lg-6 mb-2">
                                                        <div class="group-input-icon search">
                                                            <input type="text" name="search" id="title_search"
                                                                   value="{{ request('search') }}"
                                                                   placeholder="Search by Title or VIN...">
                                                            <span class="datepicker-icon">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18"
                                                                         height="18" viewBox="0 0 18 18" fill="none">
                                                                        <path
                                                                            d="M15.7506 15.7506L11.8528 11.8528M11.8528 11.8528C12.9078 10.7979 13.5004 9.36711 13.5004 7.87521C13.5004 6.38331 12.9078 4.95252 11.8528 3.89759C10.7979 2.84265 9.36711 2.25 7.87521 2.25C6.38331 2.25 4.95252 2.84265 3.89759 3.89759C2.84265 4.95252 2.25 6.38331 2.25 7.87521C2.25 9.36711 2.84265 10.7979 3.89759 11.8528C4.95252 12.9078 6.38331 13.5004 7.87521 13.5004C9.36711 13.5004 10.7979 12.9078 11.8528 11.8528Z"
                                                                            stroke="#B6B6B6" stroke-width="1.5"
                                                                            stroke-linecap="round"
                                                                            stroke-linejoin="round"></path>
                                                                    </svg>
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-3 col-lg-6 mb-2">
                                                        <div class="group-input-icon">
                                                            <input type="text" id="from-date"
                                                                   class="datetimepicker"
                                                                   name="from_date"
                                                                   value="{{ request('from_date') }}"
                                                                   placeholder="From: YYYY-MM-DD ">
                                                            <span class="datepicker-icon">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="19"
                                                                         height="18" viewBox="0 0 19 18" fill="none">
                                                                        <path
                                                                            d="M5.5625 2.25V3.9375M13.4375 2.25V3.9375M2.75 14.0625V5.625C2.75 5.17745 2.92779 4.74823 3.24426 4.43176C3.56072 4.11529 3.98995 3.9375 4.4375 3.9375H14.5625C15.0101 3.9375 15.4393 4.11529 15.7557 4.43176C16.0722 4.74823 16.25 5.17745 16.25 5.625V14.0625M2.75 14.0625C2.75 14.5101 2.92779 14.9393 3.24426 15.2557C3.56072 15.5722 3.98995 15.75 4.4375 15.75H14.5625C15.0101 15.75 15.4393 15.5722 15.7557 15.2557C16.0722 14.9393 16.25 14.5101 16.25 14.0625M2.75 14.0625V8.4375C2.75 7.98995 2.92779 7.56073 3.24426 7.24426C3.56072 6.92779 3.98995 6.75 4.4375 6.75H14.5625C15.0101 6.75 15.4393 6.92779 15.7557 7.24426C16.0722 7.56073 16.25 7.98995 16.25 8.4375V14.0625M9.5 9.5625H9.506V9.5685H9.5V9.5625ZM9.5 11.25H9.506V11.256H9.5V11.25ZM9.5 12.9375H9.506V12.9435H9.5V12.9375ZM7.8125 11.25H7.8185V11.256H7.8125V11.25ZM7.8125 12.9375H7.8185V12.9435H7.8125V12.9375ZM6.125 11.25H6.131V11.256H6.125V11.25ZM6.125 12.9375H6.131V12.9435H6.125V12.9375ZM11.1875 9.5625H11.1935V9.5685H11.1875V9.5625ZM11.1875 11.25H11.1935V11.256H11.1875V11.25ZM11.1875 12.9375H11.1935V12.9435H11.1875V12.9375ZM12.875 9.5625H12.881V9.5685H12.875V9.5625ZM12.875 11.25H12.881V11.256H12.875V11.25Z"
                                                                            stroke="#B6B6B6" stroke-linecap="round"
                                                                            stroke-linejoin="round"></path>
                                                                    </svg>
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-3 col-lg-6 mb-2">
                                                        <div class="group-input-icon">
                                                            <input type="text" id="to-date"
                                                                   class="datetimepicker"
                                                                   name="to_date" value="{{ request('to_date') }}"
                                                                   placeholder="To: YYYY-MM-DD">
                                                            <span class="datepicker-icon">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="19"
                                                                         height="18" viewBox="0 0 19 18" fill="none">
                                                                        <path
                                                                            d="M5.5625 2.25V3.9375M13.4375 2.25V3.9375M2.75 14.0625V5.625C2.75 5.17745 2.92779 4.74823 3.24426 4.43176C3.56072 4.11529 3.98995 3.9375 4.4375 3.9375H14.5625C15.0101 3.9375 15.4393 4.11529 15.7557 4.43176C16.0722 4.74823 16.25 5.17745 16.25 5.625V14.0625M2.75 14.0625C2.75 14.5101 2.92779 14.9393 3.24426 15.2557C3.56072 15.5722 3.98995 15.75 4.4375 15.75H14.5625C15.0101 15.75 15.4393 15.5722 15.7557 15.2557C16.0722 14.9393 16.25 14.5101 16.25 14.0625M2.75 14.0625V8.4375C2.75 7.98995 2.92779 7.56073 3.24426 7.24426C3.56072 6.92779 3.98995 6.75 4.4375 6.75H14.5625C15.0101 6.75 15.4393 6.92779 15.7557 7.24426C16.0722 7.56073 16.25 7.98995 16.25 8.4375V14.0625M9.5 9.5625H9.506V9.5685H9.5V9.5625ZM9.5 11.25H9.506V11.256H9.5V11.25ZM9.5 12.9375H9.506V12.9435H9.5V12.9375ZM7.8125 11.25H7.8185V11.256H7.8125V11.25ZM7.8125 12.9375H7.8185V12.9435H7.8125V12.9375ZM6.125 11.25H6.131V11.256H6.125V11.25ZM6.125 12.9375H6.131V12.9435H6.125V12.9375ZM11.1875 9.5625H11.1935V9.5685H11.1875V9.5625ZM11.1875 11.25H11.1935V11.256H11.1875V11.25ZM11.1875 12.9375H11.1935V12.9435H11.1875V12.9375ZM12.875 9.5625H12.881V9.5685H12.875V9.5625ZM12.875 11.25H12.881V11.256H12.875V11.25Z"
                                                                            stroke="#B6B6B6" stroke-linecap="round"
                                                                            stroke-linejoin="round"></path>
                                                                    </svg>
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-3 col-lg-6 mb-2">
                                                        <select name="status" class="form-control"
                                                                onchange="this.form.submit()"
                                                                style="height: 50px; border-radius: 10px; border: 1px solid #E9E9E9;">
                                                            <option value="" class="current">Select Status</option>
                                                            <option
                                                                value="active" {{ request('status') == 'active' ? 'selected' : '' }}>
                                                                Active
                                                            </option>
                                                            <option
                                                                value="sold" {{ request('status') == 'sold' ? 'selected' : '' }}>
                                                                Sold
                                                            </option>
                                                            <option
                                                                value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>
                                                                Draft
                                                            </option>
                                                            <option
                                                                value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>
                                                                Inactive
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>


                                                <div class="tfcl-table-listing">
                                                    <div class="table-responsive">
                                                        @if(request()->anyFilled(['search', 'from_date', 'to_date', 'status']))
                                                            <a href="{{ route('admin.listings.index') }}"
                                                               class="btn-reset"
                                                               style="color: #FF7101; text-decoration: none; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 5px;">
                                                                <i class="fas fa-redo-alt" style="font-size: 12px;"></i>
                                                                Reset Filters
                                                            </a>
                                                        @endif
                                                            <span class="result-text text-muted" style="font-size: 14px;">
                    Showing <b>{{ $listings->firstItem() ?? 0 }}</b> to <b>{{ $listings->lastItem() ?? 0 }}</b> of <b>{{ $listings->total() }}</b> results
                </span>

                                                        @if($listings->isEmpty())
                                                            <lable class="flex justify-content-center">No Listing
                                                                Found!
                                                            </lable>
                                                        @else
                                                            <table class="table">
                                                                <thead>
                                                                <tr>
                                                                    <th>Listing</th>
                                                                    <th>Status</th>
                                                                    <th>Posting date</th>
                                                                    <th>Action</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody class="tfcl-table-content">


                                                                @foreach($listings as $list)
                                                                    <tr>
                                                                        <td class="column-listing">
                                                                            <div class="tfcl-listing-product">
                                                                                <a href="{{route('admin.listings.view',$list->id)}}">
                                                                                    <img
                                                                                        src="{{ optional($list->getMedia('car_images')->firstWhere('custom_properties.is_cover', true))->getUrl()
        ?? asset('assets/images/default-car.png') }}"
                                                                                        alt="image">
                                                                                </a>

                                                                                <div class="tfcl-listing-summary">
                                                                                    <h4 class="tfcl-listing-title">
                                                                                        <a target="_blank"
                                                                                           href="{{route('admin.listings.view',$list->id)}}">
                                                                                            {{ $list->title ?? '' }}
                                                                                        </a>
                                                                                    </h4>

                                                                                    <div class="features-text">
                                                                                        {{ $list->vin_number ?? '' }}
                                                                                    </div>

                                                                                    <div class="price">
                                                                                        <div
                                                                                            class="inner tfcl-listing-price">
                                                                                            ${{ number_format($list->price ?? 0) }}
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </td>

                                                                        <td class="column-status">
        <span class="tfcl-listing-status
            {{ $list->status == 'active' ? 'status-publish' : 'status-draft' }}">
            {{ ucfirst($list->status ?? 'draft') }}
        </span>
                                                                        </td>

                                                                        <td class="column-date">
                                                                            <div class="tfcl-listing-date">
                                                                                {{ $list->created_at ? $list->created_at->format('d M, Y') : '' }}
                                                                            </div>
                                                                        </td>

                                                                        <td class="column-controller">
                                                                            <div class="inner-controller">
            <span class="icon">
                <img src="{{ asset('assets/images/dashboard/pen.svg') }}">
            </span>
                                                                                <a href="{{route('admin.listings.edit',$list->id)}}"
                                                                                   class="btn-action">Edit</a>
                                                                            </div>


                                                                            <div class="inner-controller">
    <span class="icon">
        <img src="{{ asset('assets/images/dashboard/trash.svg') }}">
    </span>
                                                                                <a href="javascript:void(0)"
                                                                                   class="btn-action text-danger"
                                                                                   onclick="openDeleteModal('{{ route('admin.listings.destroy', $list->id) }}')">
                                                                                    Delete
                                                                                </a>
                                                                            </div>

                                                                            <div class="inner-controller"
                                                                                 style="position: relative;">
        <span class="icon">

<i class="far fa-envelope" style="color: #FF7101;"></i>
        </span>
                                                                                <a href="{{ route('admin.listings.inquiries', $list->id) }}"
                                                                                   class="btn-action">
                                                                                    Inquiries
                                                                                    @if($list->availabilityInquiries->count() > 0)
                                                                                        <span style="
                    background: #dc3545;
                    color: white;
                    font-size: 10px;
                    font-weight: 700;
                    border-radius: 50%;
                    padding: 1px 5px;
                    margin-left: 4px;
                    vertical-align: top;
                    line-height: 1.6;
                    display: inline-block;
                ">
                    {{ $list->availabilityInquiries->count() }}
                </span>
                                                                                    @endif
                                                                                </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                @endforeach

                                                                </tbody>
                                                            </table>
                                                        @endif
                                                    </div>
                                                    @if ($listings->hasPages())
                                                        <div class="tfcl-pagination paging-navigation clearfix">

                                                            {{-- PREVIOUS --}}
                                                            @if ($listings->onFirstPage())
                                                                <span class="prev page-numbers disabled">
            <i class="far fa-angle-left"></i>
        </span>
                                                            @else
                                                                <a class="prev page-numbers"
                                                                   href="{{ $listings->previousPageUrl() }}">
                                                                    <i class="far fa-angle-left"></i>
                                                                </a>
                                                            @endif


                                                            {{-- PAGE LINKS --}}
                                                            @foreach ($listings->getUrlRange(1, $listings->lastPage()) as $page => $url)
                                                                @if ($page == $listings->currentPage())
                                                                    <span
                                                                        class="page-numbers current">{{ $page }}</span>
                                                                @else
                                                                    <a class="page-numbers"
                                                                       href="{{ $url }}">{{ $page }}</a>
                                                                @endif
                                                            @endforeach


                                                            {{-- NEXT --}}
                                                            @if ($listings->hasMorePages())
                                                                <a class="next page-numbers"
                                                                   href="{{ $listings->nextPageUrl() }}">
                                                                    <i class="far fa-angle-right"></i>
                                                                </a>
                                                            @else
                                                                <span class="next page-numbers disabled">
            <i class="far fa-angle-right"></i>
        </span>
                                                            @endif

                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </main>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
                <div class="modal-header border-0 pt-4">
                    <h5 class="modal-title w-100 text-center fw-bold" id="deleteModalLabel">Confirm Delete</h5>
                </div>
                <div class="modal-body text-center pb-4">
                    <div class="mb-3">
                        <img src="{{ asset('assets/images/dashboard/trash.svg') }}" style="width: 60px; opacity: 0.8;">
                    </div>
                    <p class="text-muted fs-15">
                        Do you really want to move this item to <strong>Trash</strong>?
                    </p>
                </div>
                <div class="modal-footer border-0 pb-4 justify-content-center">
                    <button type="button" class="btn-pf" data-bs-dismiss="modal"
                            style="background: #f2f4f7; color: #475467; border: none; padding: 10px 25px;">Cancel
                    </button>
                    <a href="#" id="confirmDeleteBtn" class="btn-pf bg-orange"
                       style="text-decoration: none;background: red; padding: 10px 25px;">
                        <span class="text-color-1">Yes, Delete</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        function openDeleteModal(deleteUrl) {
            // Confirm button ka href set karein
            document.getElementById('confirmDeleteBtn').href = deleteUrl;

            // Modal ko show karein
            var myModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            myModal.show();
        }

        $(document).ready(function () {
            // Calendar format fix (Check if your theme uses jQuery UI)
            $("#from-date, #to-date").datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function () {
                    $('#filter-form').submit();
                }
            });

            // Search typing delay (Taake har harf pe reload na ho)
            let timer;
            $('#title_search').on('keyup', function () {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    $('#filter-form').submit();
                }, 800);
            });
        });
    </script>
@endpush