@extends('admin/layouts/app')
@section('content')
<style>
    .modal {

        /*From Right/Left */
        &.drawer {
            display: flex !important;
            pointer-events: none;

            * {
                pointer-events: none;
            }

            .modal-dialog {
                margin: 0px;
                display: flex;
                flex: auto;
                transform: translate(25%, 0);

                .modal-content {
                    border: none;
                    border-radius: 0px;

                    .modal-body {
                        overflow: auto;
                    }
                }
            }

            &.show {
                pointer-events: auto;

                * {
                    pointer-events: auto;
                }

                .modal-dialog {
                    transform: translate(0, 0);
                }
            }

            &.right-align {
                flex-direction: row-reverse;
            }

            &.left-align {
                &:not(.show) {
                    .modal-dialog {
                        transform: translate(-25%, 0);
                    }
                }
            }
        }
    }
    .job-tracking-vertical {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-left: 31px;
        margin-top: 30px;
    }

    .status {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
    }

    .status-text {
        margin-left: 10px;
    }

    /* All statuses will be green */
    .status-text i { color: green; }

    strong {
        margin-top: 10px !important;
    }

    /* Vertical Line */
    .job-tracking-vertical:before {
        content: '';
        position: absolute;
        left: 17px;
        height: 100%;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #ddd;
    }

    .status:before {
        content: '';
        position: absolute;
        left: -19px;
        top: 50%;
        width: 12px;
        height: 12px;
        background-color: white;
        border: 3px solid #ddd;
        border-radius: 50%;
        z-index: 1;
    }

    .status:before { border-color: green; }

    /* Ensure the vertical line stops at the last item */
    .status:last-child:before { bottom: 0; }

    .status-dot {
        /* width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
        background-color: green;  */
        /* All dots are green */
    }
</style>
    <div class="container-fluid">
        <div id="content" class="app-content">
            <div class="d-flex align-items-center mb-5">
                <div>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="dashboard.php">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:;">Enquiry</a></li>
                        <li class="breadcrumb-item active"><i class="fa fa-arrow-back"></i> Enquiry Lead</li>
                    </ol>
                    <h1 class="page-header mb-0">Enquiry</h1>
                </div>
            </div>
            <!-- Row for equal division -->
            <div class="row">
                

                <!-- Table Section -->
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-12">
    <form method="POST" action="{{ route('enquiry.export') }}">
        @csrf

        <div class="row">

            {{-- State --}}
            <div class="col-md-3">
                <select class="form-select" name="state">
                    <option value="">Select State</option>
                    @foreach ($get_state as $state)
                        <option value="{{ $state->state }}">
                            {{ $state->state }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Status --}}
            <div class="col-md-3">
                <select class="form-select" name="status">
                    <option value="">Select Status</option>
                    <option value="2">Success</option>
                    <option value="1">Pending</option>
                </select>
            </div>

            {{-- From Date --}}
            <div class="col-md-2">
                <input type="date" class="form-control" name="fromdate">
            </div>

            {{-- To Date --}}
            <div class="col-md-2">
                <input type="date" class="form-control" name="todate">
            </div>

            {{-- Submit --}}
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">
                    Data Export
                </button>
            </div>

        </div>
    </form>
</div>
                    </div>
                  <div class="card border-0 mb-4 mt-4">
    <div class="card-header bg-none p-3"
         style="border-bottom: 1px solid #2196f3;">

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">

            {{-- Left: Title --}}
            <div class="d-flex align-items-center">
                <i class="fab fa-buromobelexperte fa-lg fa-fw text-dark text-opacity-50 me-2"></i>
                <span class="h6 mb-0">Enquiry List</span>
            </div>

            {{-- Right: Search Form --}}
            <form method="GET" action="{{ url()->current() }}" class="flex-grow-1" style="max-width: 600px;">
                <div class="input-group">
                    <input type="text"
                           name="search"
                           value="{{ request('search') }}"
                           class="form-control"
                           placeholder="Search name, age,  mobile, email, reg no, city">

                    <button class="btn btn-primary">
                        <i class="fa fa-search"></i>
                    </button>

                    <a href="{{ url()->current() }}" class="btn btn-secondary">
                        Reset
                    </a>
                </div>
            </form>

        </div>
    </div>



                        <div class="card-body overflow-auto">
                           
    <table class="table table-striped table-bordered align-middle">
        <thead>
            <tr>
                <th width="1%">Sr. No</th>
                <th>Name</th>
                <th>Age</th>
                <th>Mobile</th>
                <th>Email</th>
                <th>Category</th>
                <th>Experience</th>
                <th>State</th>
                <th>Referral</th>
                <th>City</th>
                <th>Speciality</th>
                <th>Registration No</th>
                <th>Date</th>
                <th>Status</th>
                <th>Change Status</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
        @forelse ($get_enquiry as $enquiry)

           @php
    switch ($enquiry->category) {
        case 1:
            $category = 'Bowler';
            break;
        case 2:
            $category = 'Batsman';
            break;
        case 3:
            $category = 'Wicketkeeper/Batsman';
            break;
        case 4:
            $category = 'All Rounder';
            break;
        default:
            $category = 'Not';
    }
@endphp


            <tr>
                <td class="fw-bold text-dark">
                    {{ ($get_enquiry->currentPage() - 1) * $get_enquiry->perPage() + $loop->iteration }}
                </td>
                <td>{{ ucwords($enquiry->name) }}</td>
                <td>{{ $enquiry->age }}</td>
                <td>{{ $enquiry->mobile }}</td>
                <td>{{ $enquiry->email }}</td>
                <td>{{ $category }}</td>
                <td>{{ $enquiry->experience }}</td>
                <td>{{ $enquiry->state }}</td>
                <td>{{ $enquiry->referral }}</td>
                <td>{{ $enquiry->city }}</td>
                <td>{{ $enquiry->speciality }}</td>
                <td>{{ $enquiry->registration_no }}</td>
                <td>{{ $enquiry->date }}</td>

                {{-- Status --}}
                <td>
                    @switch($enquiry->status)
                        @case(1)
                            <span class="badge bg-warning">Pending</span>
                            @break
                        @case(2)
                            <span class="badge bg-success">Success</span>
                            @break
                        @default
                            <span class="badge bg-secondary">Not</span>
                    @endswitch
                </td>

                {{-- Change Status --}}
                <td>
                    
                        <select class="regis_status form-select form-select-sm"
                                data-id="{{ $enquiry->id }}">
                            <option value="1" {{ $enquiry->status == 1 ? 'selected' : '' }}>Pending</option>
                            <option value="2" {{ $enquiry->status == 2 ? 'selected' : '' }}>Success</option>
                        </select>


                </td>

                {{-- Action --}}
                <td>
                    <a href="{{ route('edit.enquiry', $enquiry->id) }}" class="text-primary me-2">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                    <form action="{{ route('enquiry.destroy', $enquiry->id) }}" method="POST" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-link text-danger p-0" onclick="return confirm('Are you sure you want to delete this enquiry?');">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                </td>
            </tr>

        @empty
            <tr>
                <td colspan="16" class="text-center text-danger fw-bold">
                    No records found
                </td>
            </tr>
        @endforelse
        </tbody>
    </table>
</div>

                        <div class="d-flex justify-content-end mt-3">
                                {{ $get_enquiry->links('pagination::bootstrap-5') }}
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="right_modal">
        <!-- Right Modal -->
        <div class="modal fade drawer right-align" id="exampleModalRight" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    {{-- <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Right Align Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> --}}
                    <div class="modal-body">
                        <div class="job-tracking-vertical">



                        </div>
                    </div>


                    {{-- <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Structure -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <!-- Modal content with select option -->
            
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="AssignLead();">Save changes</button>
            </div>
        </div>
        </div>
    </div>


@endsection