@extends('layouts.admin-layout')
@section('title', 'All Customize Requests')
@section('content')
    <style>
        /* Button Styling */
        .open-modal-btn {
            background-color: #333; /* Dark black background */
            border: 2px solid #333; /* Border matching the background */
            color: white; /* White text */
            font-size: 0.9rem; /* Smaller font size for a more compact look */
            padding: 8px 16px; /* Reduced padding for a smaller button */
            border-radius: 30px; /* Rounded corners with less curve */
            text-transform: uppercase; /* Uppercase text */
            font-weight: bold; /* Bold text */
            transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        }

        /* Hover Effect */
        .open-modal-btn:hover {
            background-color: #444; /* Slightly lighter black when hovered */
            border-color: #444; /* Border also changes to a lighter black */
            color: #fff; /* Keep the text white */
            transform: translateY(-3px); /* Lift the button up slightly on hover */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
        }

        /* Focus Effect */
        .open-modal-btn:focus {
            outline: none; /* Remove the default focus outline */
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Blue outline when focused */
        }

        /* Active Button (on click) */
        .open-modal-btn:active {
            background-color: #222; /* Even darker black on click */
            border-color: #222;
            transform: translateY(1px); /* Slightly depressed button effect */
        }
    </style>

    <style>
        /* Modal Background */
        .modal-backdrop.show {
            background-color: rgba(0, 0, 0, 0.7); /* Darker background */
        }

        /* Modal Content */
        .modal-content {
            border-radius: 10px;
            padding: 20px;
            background-color: #333; /* Dark background for the modal content */
            color: white; /* Text color for contrast */
            transition: transform 0.3s ease-in-out, opacity 0.3s ease; /* Added opacity transition */
        }

        /* Modal Header */
        .modal-header {
            background-color: #222; /* Dark background for header */
            color: white;
            border-bottom: 2px solid #444; /* Slightly lighter border */
            padding: 15px;
            transition: background-color 0.3s ease; /* Smooth background change */
        }

        .modal-header .close {
            color: white;
            font-size: 1.5rem;
            opacity: 1;
            transition: opacity 0.3s ease; /* Smooth opacity change */
        }

        .modal-header .close:hover {
            opacity: 0.7;

        }

        /* Form Fields */
        .form-group label {
            font-weight: bold;
            color: #ddd; /* Lighter label text color */
        }

        .form-control {
            border-radius: 8px;
            padding: 12px;
            font-size: 1rem;
            background-color: #555; /* Dark background for input */
            color: black; /* White text color for better contrast */
            border: 2px solid #444; /* Lighter border for input */
            transition: all 0.3s ease; /* Smooth transition on focus */
        }

        .form-control:focus {
            background-color: #666; /* Slightly lighter background when focused */
            border-color: #007bff; /* Border color changes on focus */
        }

        /* Border for Price Field */
        .form-control.border-primary {
            border-color: #444;
            transition: border-color 0.3s ease;
        }

        .form-control.border-primary:focus {
            border-color: #0056b3;
        }

        /* Button Styling */
        .btn-secondary {
            background-color: #333;
            border-color: #333;
            color: white; /* White text on dark buttons */
            font-weight: bold;
        }

        .btn-secondary:hover {
            background-color: #444;
            border-color: #444;
            transform: translateY(-2px); /* Lift the button on hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow on hover */
        }

        .btn-success {
            background-color: #222;
            border-color: #222;
            color: white;
            font-weight: bold;
        }

        .btn-success:hover {
            background-color: #333;
            border-color: #333;
            transform: translateY(-2px); /* Lift the button on hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow on hover */
        }

        /* Hover Effects for Buttons */
        .btn:hover {
            transform: translateY(-3px); /* Lift the button higher on hover */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
        }
    </style>

    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-12 mt-3">
                        <div class="card card-primary card-box-shadow">
                            <div class="card-body">
                                <h2>Customize Request Section</h2>
                                <table id="example" class="table table-striped table-bordered" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>S.N.</th>
                                        <th>Name</th>
                                        <th>Quantity</th>
                                        <th>Event Name</th>
                                        <th>Email</th>
                                        <th>Contact Number</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($customRequests as $request)
                                        <tr>
                                            <td>{{ $loop->iteration ?? '-' }}</td>
                                            <td>{{ $request->name ?? '-' }}</td>
                                            <td>{{ $request->quantity ?? '-' }}</td>
                                            <td>{{ $request->relatedEvent->event_name ?? '-' }}</td>
                                            <td>{{ $request->email ?? '-' }}</td>
                                            <td>{{ $request->contact_number ?? '-' }}</td>
                                            <td>
                                                <button
                                                    class="btn btn-primary open-modal-btn"
                                                    data-name="{{ $request->name }}"
                                                    data-email="{{ $request->email }}"
                                                    data-quantity="{{ $request->quantity }}"
                                                    data-eventid="{{ $request->relatedEvent?->id }}"
                                                    data-toggle="modal"
                                                    data-target="#customizeModal">
                                                    Open Modal
                                                </button>

                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="customizeModal" tabindex="-1" role="dialog" aria-labelledby="customizeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content shadow-lg rounded">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="customizeModalLabel">Customize Request</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="customizeForm">
                        <!-- Name (Read-only) -->
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" id="name" readonly>
                        </div>

                        <input type="hidden" class="form-control" id="eventId">

                        <!-- Email (Read-only) -->
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" readonly>
                        </div>

                        <!-- Quantity (Read-only) -->
                        <div class="form-group">
                            <label for="quantity">Quantity</label>
                            <input type="number" class="form-control" id="quantity" readonly>
                        </div>

                        <!-- Price Input -->
                        <div class="form-group">
                            <label for="price">Price</label>
                            <input type="number" class="form-control border-primary" id="price" placeholder="Enter Price">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success send-btn">Send</button>
                </div>
            </div>
        </div>
    </div>

{{--    <!-- Add some additional custom CSS styling -->--}}


@endsection

@section('script')

    <script>
        $(document).ready(function () {
            $("table").DataTable();

            $(document).on('click', '.open-modal-btn', function () {
                var name = $(this).data('name');
                var email = $(this).data('email');
                var quantity = $(this).data('quantity');
                var eventId = $(this).data('eventid');

                $('#name').val(name);
                $('#email').val(email);
                $('#quantity').val(quantity);
                $('#eventId').val(eventId);
            });

            $(document).on('click', '.send-btn', function () {
                var name = $('#name').val();
                var email = $('#email').val();
                var quantity = $('#quantity').val();
                var price = $('#price').val();
                var eventId = $('#eventId').val();

                if (!price) {
                    alert('Please enter a price.');
                    return;
                }

                if(!eventId){
                    alert('Event ID Not Found.');
                    return;
                }

                $.ajax({
                    url: "{{ route('admin.send.payment.link') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        name: name,
                        email: email,
                        quantity: quantity,
                        price: price,
                        eventId: eventId
                    },
                    success: function (response) {
                        alert(response.message || "Payment link sent successfully!");
                        $('#customizeModal').modal('hide');
                    },
                    error: function (error) {
                        alert("Error sending payment link.");
                        console.log(error);
                    }
                });
            });
        });
    </script>

@endsection