@extends('Admin.layout.layout')

@section('admin_content')
    @if (Session::has('success'))
        <div class="alert alert-success alert-block">
            <strong>{{ Session::get('success') }}</strong>
        </div>
    @endif

    <div class="page-content-wrapper border">

        <!-- Title -->
        <div class="row mb-3">
            <div class="col-12 d-sm-flex justify-content-between align-items-center">
                <h1 class="h3 mb-2 mb-sm-0">Product Request</h1>

            </div>
        </div>


        <!-- Card START -->
        <div class="card bg-transparent border">

            <!-- Card header START -->
            <div class="card-header bg-light border-bottom">
                <!-- Search and select START -->
                <div class="row g-3 align-items-center justify-content-between">
                    <!-- Search bar -->
                    <div class="col-md-3">
                        <form action="{{ route('admin.product.request') }}" method="GET" class="rounded position-relative">
                            <input name="search" class="form-control bg-body" type="search" placeholder="Search"
                                aria-label="Search" value="{{ request()->get('search') }}">
                            <button
                                class="bg-transparent p-2 position-absolute top-50 end-0 translate-middle-y border-0 text-primary-hover text-reset"
                                type="submit">
                                <i class="fas fa-search fs-6"></i>
                            </button>
                        </form>
                    </div>

                    <!-- Select option -->
                    <div class="col-md-3">
                        <!-- Short by filter -->
                        <form>
                            <select class="form-select js-choice border-0 z-index-9" aria-label=".form-select-sm">
                                <option value="">Sort by</option>
                                <option>Newest</option>
                                <option>Oldest</option>
                                <option>Accepted</option>
                                <option>Rejected</option>
                            </select>
                        </form>
                    </div>
                </div>
                <!-- Search and select END -->
            </div>
            <!-- Card header END -->

            <!-- Card body START -->
            <div class="card-body">
                <!-- Course table START -->
                <div class="table-responsive border-0 rounded-3">
                    <!-- Table START -->
                    <table class="table table-dark-gray align-middle p-4 mb-0 table-hover">
                        <!-- Table head -->
                        <thead>
                            <tr>
                                <th scope="col" class="border-0 rounded-start">Sr.No</th>
                                <th scope="col" class="border-0">Products Name</th>
                                <th scope="col" class="border-0">Name</th>
                                <th scope="col" class="border-0">Email</th>
                                <th scope="col" class="border-0">Date</th>
                                <th scope="col" class="border-0 text-center rounded-end">Action</th>



                            </tr>
                        </thead>

                        <!-- Table body START -->
                        <tbody>
                            @foreach ($ProductsRequest as $data)
                                <!-- Table row -->
                                <tr>
                                    <td>{{ $data->id }}</td>

                                    <!-- Table data -->
                                    <td>
                                        <div>
                                            <div class="ms-2">
                                                <h6 class="mb-0 fw-light">{{ $data->product_name }}</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $data->name }}</td>
                                    <td>{{ $data->email }}</td>
                                    <td>{{ $data->created_at->format('d/M/Y') }}</td>


                                    <!-- Table data -->
                                    <td class="text-center">
                                        <a href="javascript:void(0);"
                                            class="btn btn-success-soft btn-round me-1 mb-1 mb-md-0 btn-details"
                                            data-product_name="{{ $data->product_name }}" data-product_price="{{ number_format($data->product_price, 2) }}"
                                            data-name="{{ $data->name }}" data-email="{{ $data->email }}"
                                            data-phone="{{ $data->phone }}" data-city="{{ $data->city }}"
                                            data-address="{{ $data->address }}"
                                            data-description="{{ $data->description }}" title="Details">
                                            <i class="bi bi-plus"></i>
                                        </a>
                                        <a href="javascript:void(0);"
                                            class="btn btn-danger-soft btn-round me-1 mb-1 mb-md-0"
                                            onclick="deleteConfirmation('{{ route('admin.product.destroy', $data->id) }}')"
                                            data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <!-- Table body END -->
                    </table>
                    <!-- Table END -->
                </div>
                <!-- Course table END -->
            </div>
            <!-- Card footer END -->
        </div>
        <!-- Card footer START -->
        <div class="card-footer bg-transparent pt-0">
            <!-- Pagination START -->

            {{ $ProductsRequest->links() }}

            <!-- Pagination END -->
        </div>
        <!-- Card END -->
    </div>
    <!-- Product Details Modal -->
    <div class="modal fade" id="productDetailsModal" tabindex="-1" aria-labelledby="productDetailsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productDetailsModalLabel"><span id="modalProductName"></span><br>£ : <span class="text-success" id="modalProductPrice"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>Name:</strong> <span id="modalName"></span></p>
                    <p><strong>Email:</strong> <span id="modalEmail"></span></p>
                    <p><strong>Phone:</strong> <span id="modalPhone"></span></p>
                    <p><strong>City:</strong> <span id="modalCity"></span></p>
                    <p><strong>Address:</strong> <span id="modalAddress"></span></p>
                    <p><strong>Description:</strong> <span id="modalDescription"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    {{-- @section('script') --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            $('body').on('click', '.btn-details', function(event) {
                event.preventDefault();

                var product_name = $(this).data('product_name');
                var product_price = $(this).data('product_price');
                var name = $(this).data('name');
                var email = $(this).data('email');
                var phone = $(this).data('phone');
                var city = $(this).data('city');
                var address = $(this).data('address');
                var description = $(this).data('description');

                $("#modalProductName").text(product_name);
                $("#modalProductPrice").text(product_price);
                $("#modalName").text(name);
                $("#modalEmail").text(email);
                $("#modalPhone").text(phone);
                $("#modalCity").text(city);
                $("#modalAddress").text(address);
                $("#modalDescription").text(description);

                $("#productDetailsModal").modal('show');
            });
        });
    </script>

    <!--- Modal -->
@endsection

@section('titel')
    Product Request
@endsection