@extends('layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <style>
        .FormCard {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .FormGroup {
            margin-bottom: 16px;
        }

        .Label {
            font-weight: 600;
            margin-bottom: 6px;
            display: block;
            color: #2ca5d6;
        }

        .Input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .Input:focus {
            outline: none;
            border-color: #2ca5d6;
        }

        .MainButton {
            background: linear-gradient(90deg, #2ca5d6, #32cd32);
            color: #fff;
            font-weight: bold;
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
        }

        .MainButton:hover {
            background: linear-gradient(90deg, #1e90d6, #28b428);
        }

        .submit_btn {
            text-align: right;
        }

        .DataTable {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }

        table th {
            background-color: #f4f4f4;
        }

        .badge-success {
            background-color: #28a745;
            color: #fff;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 12px;
        }

        .badge-secondary {
            background-color: #6c757d;
            color: #fff;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 12px;
        }

        .badge-active {
            background-color: #198754;
            color: #fff;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 12px;
        }

        .action-buttons button {
            margin-right: 5px;
        }
    </style>

    <div class="container mx-auto px-4 py-6">

        <!-- ✅ Form Card -->
        <div class="FormCard">
            <h2 class="text-xl font-semibold mb-4">Create Coupons</h2>
            <form action="{{ route('coupons.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- Title -->
                    <div class="FormGroup">
                        <label for="title" class="Label">Title</label>
                        <input type="text" name="title" id="title" placeholder="Enter Title" class="Input">
                    </div>

                    <!-- Description -->
                    <div class="FormGroup md:col-span-2">
                        <label for="description" class="Label">Description</label>
                        <input type="text" name="description" id="description" placeholder="Enter Description"
                            class="Input">
                    </div>

                    <!-- Amount -->
                    <div class="FormGroup">
                        <label for="amount" class="Label">Amount (₹)</label>
                        <input type="number" name="amount" id="amount" placeholder="Enter Amount" class="Input">
                    </div>

                    <!-- Minimum Amount -->
                    <div class="FormGroup">
                        <label for="minimum_amount" class="Label">Minimum Amount (₹)</label>
                        <input type="number" name="minimum_amount" id="minimum_amount"
                            placeholder="Minimum purchase amount" class="Input">
                    </div>

                    <!-- Vehicle Type -->
                    <div class="FormGroup">
                        <label for="vehicle_type" class="Label">Vehicle Type</label>
                        <select name="vehicle_type" id="vehicle_type" class="Input" onchange="filterServices()">
                            <option value="">Select Type</option>
                            <option value="bike">Bike</option>
                            <option value="car">Car</option>
                        </select>
                    </div>

                    <!-- Service -->
                    <div class="FormGroup">
                        <label for="service_id" class="Label">Service</label>
                        <select name="service_id" id="service_id" class="Input">
                            <option value="">Select Service</option>
                            {{-- Options will be filled by JS --}}
                        </select>
                    </div>

                    <!-- Status -->
                    <div class="FormGroup">
                        <label for="status" class="Label">Status</label>
                        <select name="status" id="status" class="Input">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>

                <div class="submit_btn mt-4">
                    <button type="submit" class="MainButton">Create</button>
                </div>
            </form>


        </div>

        <!-- ✅ DataTable Below -->
        <div class="DataTable mt-6">
            <table id="partnersTable" class="display" style="width:100%">
                <thead>
                    <tr class="text-xs text-gray-700 uppercase border-b">
                        <th class="px-4 py-3">SR.NO</th>
                        <th class="px-4 py-3">TITLE</th>
                        <th class="px-4 py-3">Code</th>
                        <th class="px-4 py-3">DESCRIPTION</th>
                        <th class="px-4 py-3">AMOUNT (₹)</th>
                        <th class="px-4 py-3">SERVICE</th>
                        <th class="px-4 py-3">STATUS</th>
                        <th class="px-4 py-3">ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($coupons as $key => $coupon)
                        <tr class="border-b">
                            <td class="px-4 py-2">{{ $key + 1 }}</td>
                            <td class="px-4 py-2">{{ $coupon->title ?? 'N/A' }}</td>
                            <td class="px-4 py-2">{{ $coupon->coupon_code ?? 'N/A' }}</td>
                            <td class="px-4 py-2">{{ $coupon->description ?? 'N/A' }}</td>
                            <td class="px-4 py-2">₹{{ number_format($coupon->amount, 2) }}</td>
                            <td class="px-4 py-2">{{ $coupon->service->title ?? 'N/A' }}</td>
                            <td class="px-4 py-2">
                                <form action="{{ route('coupons.toggleStatus', $coupon->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                        class="text-sm font-semibold 
                                         {{ $coupon->status === 'active' ? 'text-green-600' : 'text-red-600' }}">
                                        {{ ucfirst($coupon->status) }}
                                    </button>
                                </form>
                            </td>


                            <td class="px-4 py-2">
                                <form action="{{ route('coupons.destroy', $coupon->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="RedirectButton bg-red-500 text-white px-3 py-1 rounded text-xs">
                                        Delete
                                    </button>
                                </form>
                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-2 text-center text-gray-500">No Coupons Found</td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>

    </div>



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- ✅ jQuery required -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#partnersTable').DataTable({
                scrollY: '400px',
                scrollCollapse: true,
                paging: true
            });
        });
    </script>

    <script>
        function filterServices() {
            let vehicleType = document.getElementById("vehicle_type").value;
            let serviceDropdown = document.getElementById("service_id");

            // Clear old options
            serviceDropdown.innerHTML = '<option value="">Loading...</option>';

            // Use Laravel route helper in Blade
            let routeBase = @json(route('coupons.filterServices', ':type'));
            let url = routeBase.replace(':type', vehicleType);

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    serviceDropdown.innerHTML = '<option value="">Select Service</option>';
                    data.forEach(service => {
                        let option = document.createElement("option");
                        option.value = service.id;
                        option.text = service.name ?? "Unnamed";
                        serviceDropdown.appendChild(option);
                    });
                });
        }
    </script>
@endsection