@extends('layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

    <style>
        .managing_main_div {
            display: flex;
            gap: 20px;
            flex-direction: column;
            padding: 20px;
        }

        .butt_div {
            display: flex;
            gap: 20px;
        }

        .content_div {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            padding: 20px;
        }

        .add_service_div {
            padding: 0 20%;
        }

        .inp_row {
            display: flex;
            gap: 20px;
            margin-top: 30px;
            align-items: flex-end;
        }

        .inp_col {
            display: flex;
            flex-direction: column;
            flex: 1;
            color: #2ca5d6;
        }

        .inp_col span {
            text-align: center;
        }

        .inp_col input,
        .inp_col select {
            border: 1px solid #ccc;
            border-radius: 4px;
            height: 40px;
            font-size: 14px;
            font-weight: 400;
            padding: 0 10px;
            color: #8b8989;
        }

        .photo_choose .upload_btn {
            display: flex;
            justify-content: center;
            position: relative;
        }

        .photo_choose .upload_btn button {
            width: 100%;
        }

        .photo_choose .upload_btn .file_input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .feat_div {
            display: flex;
            flex-direction: column;
        }

        .feat_div .service_input_wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            margin-left: 20px;
        }

        .feat_div .service_input_wrapper input {
            width: 100%;
        }

        .feat_div .service_input_wrapper svg {
            color: #9b9393;
        }

        .submit_btn {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .MainButton {
            background: linear-gradient(100deg, #2ca5d6, #32cd32);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 40px;
            cursor: pointer;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
        }

        .MainButton.selected {
            font-size: 14px;
            font-weight: 400;
            border-radius: 40px;
            padding: 5px 20px;
            background: linear-gradient(100deg, #2ca5d6, #32cd32);
            color: #fff;
            border: none;
        }

        .BlackBorderButton {
            background-color: transparent;
            color: #8b8989;
            border: 1px solid #ccc;
            /* Updated: To match other input fields */
            padding: 0 10px;
            /* Updated: To match other input fields */
            border-radius: 4px;
            /* Updated: To match other input fields */
            height: 40px;
            /* Updated: To match other input fields */
            cursor: pointer;
            font-size: 14px;
            font-weight: 400;
        }

        .RedirectButton {
            background: linear-gradient(100deg, #2ca5d6, #32cd32);
            color: white;
            border: none;
            padding: 5px 20px;
            border-radius: 40px;
            cursor: pointer;
            text-decoration: none;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .RedirectButton svg {
            color: white;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            overflow-x: auto;
        }

        table th,
        table td {
            text-align: center;
            padding: 8px;
        }

        table th {
            font-size: 14px;
            font-weight: 500;
            color: #2ca5d6;
        }

        table td {
            font-size: 14px;
            font-weight: 400;
        }

        table tr {
            border-bottom: 1px solid #e6eff5;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 5px 10px;
            margin: 0 2px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #2ca5d6;
            color: white !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #ccc !important;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin: 20px 0px;
        }

        .pagination button {
            border-radius: 50px;
            background-color: #fff;
            border: 2px solid lightgray;
        }

        .pagination button:not(:disabled) {
            cursor: pointer;
            border: 2px solid #2ca5d6;
        }

        @media (max-width: 567px) {
            .services_main_div .content_div {
                padding-bottom: 20px;
            }

            .services_main_div .butt_div {
                flex-wrap: wrap;
                justify-content: center;
                gap: 18px;
            }

            .services_main_div .content_div .add_service_div {
                padding: 0 5%;
                height: unset;
            }

            .inp_row {
                align-items: unset;
                flex-direction: column;
            }
        }

        @media (min-width: 567px) and (max-width: 992px) {
            .services_main_div .content_div {
                padding-bottom: 20px;
            }

            .services_main_div .content_div .add_service_div {
                padding: 0 10%;
            }
        }
    </style>

    <div class="managing_main_div">
        <div class="butt_div">
            <button class="MainButton selected" onclick="toggleView('add')">Add Services</button>
            <button class="MainButton" onclick="toggleView('list')">Service List</button>
        </div>

        <div class="content_div">
            <div id="addServicesView" class="add_service_div">
                <form action="{{ route('services.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="inp_row">
                        <div class="inp_col">
                            <span>Title</span>
                            <input type="text" name="title" placeholder="Title" required />
                        </div>
                        <div class="inp_col">
                            <span>Description</span>
                            <input type="text" name="description" placeholder="Description" />
                        </div>
                    </div>

                    <div class="inp_row">
                        <div class="inp_col">
                            <span>Duration (min)</span>
                            <input type="number" name="duration" placeholder="30" required />
                        </div>
                        <div class="inp_col">
                            <span>Price</span>
                            <input type="number" name="price" placeholder="2000" required />
                        </div>
                    </div>
                    <div class="inp_row">
                       
                        <div class="inp_col">
                            <span>Partner Price</span>
                            <input type="number" name="partner_price" placeholder="2000" required />
                        </div>
                    </div>

                    <div class="inp_row">
                        <div class="inp_col">
                            <span>Bike List</span>
                            <select name="bike">
                                <option value="">Select to show List</option>
                                <option value="Cruiser">Cruiser</option>
                                <option value="Sportbike">Sportbike</option>
                                <option value="Bullet Bike">Bullet Bike</option>
                                <option value="Adventure">Adventure / Dual-Sport</option>
                                <option value="Standard">Standard / Naked Bike</option>
                                <option value="Touring">Touring</option>
                                <option value="Bobber">Bobber</option>
                                <option value="Scooter">Scooter</option>
                                <option value="Electric">Electric Motorcycle</option>
                            </select>
                        </div>
                        <div class="inp_col">
                            <span>Car List</span>
                            <select name="car">
                                <option value="">Select to show List</option>
                                <option value="Sedan">Sedan</option>
                                <option value="SUV">SUV</option>
                                <option value="Compact SUV">Compact SUV</option>
                                <option value="Coupe">Coupe</option>
                                <option value="Hatchback">Hatchback</option>
                                <option value="Sports Car">Sports Car</option>
                                <option value="Crossover">Crossover</option>
                                <option value="Convertible">Convertible</option>
                                <option value="Electric Vehicle">Electric Vehicle</option>
                                <option value="Hybrid Vehicle">Hybrid Vehicle</option>
                                <option value="Van">Van</option>
                            </select>
                        </div>
                    </div>

                    <div class="inp_row">
                        <div class="inp_col">
                            <span>Image</span>
                            <div class="photo_choose">
                                <div class="upload_btn">
                                    <button type="button" class="BlackBorderButton">Upload Image</button>
                                    <input type="file" name="image" class="file_input" accept="image/*" />
                                </div>
                            </div>
                        </div>
                        <div class="inp_col">
                            <span>Features</span>
                            <input type="text" name="features" placeholder="Add Feature like ABS, Airbags, etc." />
                        </div>
                    </div>

                    <div class="inp_row">
                        <div class="inp_col">
                            <div class="submit_btn">
                                <button type="submit" class="MainButton">Submit Now</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div id="serviceListView" style="display: none;">
                <table>
                    <thead>
                        <tr>
                            <th>Sr.No</th>
                            <th>Date</th>
                            <th>Title</th>
                            <th>Bike</th>
                            <th>Car</th>
                            <th>Description</th>
                            <th>Duration</th>
                            <th>Price</th>
                            <th>Partner Price</th>
                            <th>Features</th>
                            <th>Image</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($services as $index => $service)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $service->created_at->format('Y-m-d') }}</td>
                                <td>{{ $service->title }}</td>
                                <td>{{ $service->bike ?? 'N/A' }}</td>
                                <td>{{ $service->car ?? 'N/A' }}</td>
                                <td>{{ $service->description ?? 'N/A' }}</td>
                                <td>{{ $service->duration }}</td>
                                <td>{{ $service->price }}</td>
                                <td>{{ $service->partner_price }}</td>
                                <td>
                                    @if ($service->features)
                                        {{ implode(', ', json_decode($service->features, true)) }}
                                    @else
                                        N/A
                                    @endif
                                </td>
                                <td>
                                    <button class="RedirectButton" data-bs-toggle="modal"
                                        data-bs-target="#viewImageModal{{ $service->id }}">
                                        View Image
                                    </button>
                                </td>
                                  <td>
                                    <button class="RedirectButton" data-bs-toggle="modal"
                                        data-bs-target="#editModal{{ $service->id }}">
                                        Edit
                                    </button>
                                </td>
                                <td>
                                    <button class="RedirectButton" data-bs-toggle="modal"
                                        data-bs-target="#deleteModal{{ $service->id }}">
                                        Delete
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center">No services found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                @foreach ($services as $service)
                    <!-- View Image Modal -->
                    <div class="modal fade" id="viewImageModal{{ $service->id }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered modal-md">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Service Image</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body text-center">
                                    @if ($service->image)
                                        <img src="{{ asset('storage/' . $service->image) }}"
                                            class="img-fluid rounded shadow" alt="Service Image"
                                            style="max-height: 300px;">
                                    @else
                                        <p>No image available</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Delete Modal -->
                    <div class="modal fade" id="deleteModal{{ $service->id }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered modal-md">
                            <div class="modal-content">
                                <div class="modal-header bg-success text-white">
                                    <h5 class="modal-title">Confirm Deletion</h5>
                                    <button type="button" class="btn-close btn-close-white"
                                        data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <p>Are you sure you want to delete <strong>{{ $service->title }}</strong>?</p>
                                </div>
                                <div class="modal-footer justify-content-center">
                                    <form action="{{ route('services.destroy', $service->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn"
                                            style="background: linear-gradient(100deg, #2ca5d6, #32cd32);">Yes,
                                            Delete</button>
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Cancel</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                     <!-- Edit Modal -->
                    <div class="modal fade" id="editModal{{ $service->id }}" tabindex="-1">
                        <div class="modal-dialog modal-lg modal-dialog-centered">
                            <div class="modal-content p-4">
                                <div class="modal-header">
                                    <h5 class="modal-title">Edit Service - {{ $service->title }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>

                                <div class="modal-body">
                                    <form action="{{ route('services.update', $service->id) }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        @method('PUT')

                                        <div class="inp_row">
                                            <div class="inp_col">
                                                <span>Title</span>
                                                <input type="text" name="title" value="{{ $service->title }}"
                                                    required />
                                            </div>
                                            <div class="inp_col">
                                                <span>Description</span>
                                                <input type="text" name="description"
                                                    value="{{ $service->description }}" />
                                            </div>
                                        </div>

                                        <div class="inp_row">
                                            <div class="inp_col">
                                                <span>Duration (min)</span>
                                                <input type="number" name="duration" value="{{ $service->duration }}"
                                                    required />
                                            </div>
                                            <div class="inp_col">
                                                <span>Price</span>
                                                <input type="number" name="price" value="{{ $service->price }}"
                                                    required />
                                            </div>
                                        </div>

                                        <div class="inp_row">
                                            <div class="inp_col">
                                                <span>Bike List</span>
                                                <select name="bike" {{ $service->bike ? '' : 'disabled' }}>
                                                    @if ($service->bike)
                                                        <option value="{{ $service->bike }}" selected>
                                                            {{ $service->bike }}</option>
                                                    @else
                                                        <option value="">N/A</option>
                                                    @endif
                                                </select>
                                            </div>

                                            <div class="inp_col">
                                                <span>Car List</span>
                                                <select name="car" {{ $service->car ? '' : 'disabled' }}>
                                                    @if ($service->car)
                                                        <option value="{{ $service->car }}" selected>{{ $service->car }}
                                                        </option>
                                                    @else
                                                        <option value="">N/A</option>
                                                    @endif
                                                </select>
                                            </div>
                                        </div>


                                        <div class="inp_row">
                                            <div class="inp_col">
                                                <span>Image</span>
                                                <div class="photo_choose">
                                                    <div class="upload_btn">
                                                        <button type="button" class="BlackBorderButton">Upload
                                                            Image</button>
                                                        <input type="file" name="image" class="file_input"
                                                            accept="image/*" />
                                                    </div>
                                                    @if ($service->image)
                                                        <img src="{{ asset('storage/' . $service->image) }}"
                                                            alt="Service Image" class="mt-2 rounded shadow"
                                                            style="max-height: 80px;">
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="inp_col">
                                                <span>Features</span>
                                                <input type="text" name="features"
                                                    value="{{ $service->features ? implode(', ', json_decode($service->features, true)) : '' }}" />
                                            </div>
                                        </div>

                                        <div class="inp_row">
                                            <div class="inp_col">
                                                <div class="submit_btn">
                                                    <button type="submit" class="MainButton">Update Now</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        function toggleView(view) {
            const buttons = document.querySelectorAll('.butt_div .MainButton');
            buttons.forEach(button => button.classList.remove('selected'));

            if (view === 'add') {
                document.getElementById('addServicesView').style.display = 'block';
                document.getElementById('serviceListView').style.display = 'none';
                document.querySelector('.butt_div .MainButton:nth-child(1)').classList.add('selected');
            } else {
                document.getElementById('addServicesView').style.display = 'none';
                document.getElementById('serviceListView').style.display = 'block';
                document.querySelector('.butt_div .MainButton:nth-child(2)').classList.add('selected');

                if (!$.fn.DataTable.isDataTable('#serviceListView table')) {
                    $('#serviceListView table').DataTable();
                }
            }
        }

        window.onload = function() {
            toggleView('add');
        };
    </script>
    <script>
        $(document).ready(function() {
            $('select[name="bike"]').on('change', function() {
                if ($(this).val() !== '') {
                    $('select[name="car"]').val('');
                } else {
                    $('select[name="car"]');
                }
            });

            $('select[name="car"]').on('change', function() {
                if ($(this).val() !== '') {
                    $('select[name="bike"]').val('');
                } else {
                    $('select[name="bike"]');
                }
            });
        });
    </script>
@endsection