@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Bus Detail</title>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

<link rel="stylesheet" href="assets/css/toggle.css">
@section('main-content')
    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242B !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }
    </style>

    <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Holiday deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <div class="d-none" id="messageContainer" style="position: absolute; top:15%; margin-left:1%;">

    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-auto container-p-y row">
            <div class="col-6 mb-3">
                <h4 class="fw-bold py-3 mb-1"><span class="text-muted fw-light">Records / </span>Bus Detail</h4>
            </div>
            @php
                $yearRange = session('year_range'); // Example: "2023-2024"
                $currentDate = now();
                [$startYear, $endYear] = explode('-', $yearRange);

                $startDate = \Carbon\Carbon::create($startYear, 4, 1, 0, 0, 0); // April 1st
                $endDate = \Carbon\Carbon::create($endYear, 3, 31, 23, 59, 59); // March 31st
            @endphp
            @if ($currentDate->between($startDate, $endDate))
                <div class="col-6">
                    <div class="text-end upgrade-btn">
                        <a href="/create-busdetail" class="btn btn-primary text-white">Add Bus Detail</a>
                    </div>
                </div>
            @endif
            <!-- Basic Bootstrap Table -->
            <div class="card pb-5 ms-2">
                <h5 class="mt-3">Bus Detail</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="busdrivers">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Bus Number</th>
                                <th>Driver Name</th>
                                <th>Assistant Name</th>
                                <th>Route</th>
                                {{-- <th>Active</th> --}}
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($busDrivers) && count($busDrivers) > 0)
                                @foreach ($busDrivers as $key => $driver)
                                    <tr id="row_{{ $driver->id }}">
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $driver->bus_number }}</td>
                                        <td>
                                            {{ $driver->driver_name }}
                                        </td>
                                        <td>
                                            {{ $driver->attendant_name ?? '-' }}
                                        </td>
                                        <td>{{ $driver->route_name ?? '-' }}</td>
                                        <td>
                                            <div class="dropdown text-center">
                                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                                    data-bs-toggle="dropdown">
                                                    <i class="bx bx-dots-vertical-rounded"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item view-driver-btn" href="#"
                                                        data-bs-toggle="modal" data-bs-target="#viewDriverModal"
                                                        data-driver='@json($driver)'>
                                                        <i class="bx bx-book-open"></i> View
                                                    </a>

                                                    <a href="{{ url('/edit-busdetail/' . $driver->id) }}"
                                                        class="dropdown-item text-primary">
                                                        <i class="bx bx-edit-alt me-1"></i> Edit
                                                    </a>


                                                    <a class="dropdown-item change-password-btn" href="#"
                                                        data-bs-toggle="modal" data-bs-target="#changePasswordModal"
                                                        data-driver-id="{{ $driver->id }}"
                                                        data-bus-number="{{ $driver->bus_number }}">
                                                        <i class="bx bx-edit-alt me-1"></i> Change Password
                                                    </a>

                                                    <a href="#" class="dropdown-item text-danger delete-driver-btn"
                                                        data-id="{{ $driver->id }}"
                                                        data-bus-number="{{ $driver->bus_number }}">
                                                        <i class="bx bx-trash me-1"></i> Delete
                                                    </a>

                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="7"><span>No records found</span></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
        <!-- / Content -->
    </div>
    <!-- Change Password Modal -->
    <div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <form id="changePasswordForm">
                <input type="hidden" name="driver_id" id="driverId">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Change Password for Bus: <span id="busNumberDisplay"></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            id="closeModalBtn"></button>
                    </div>
                    <div class="modal-body">
                        <!-- New Password with Show/Hide -->
                        <div class="mb-3">
                            <label class="form-label">New Password</label>
                            <div class="input-group">
                                <input type="password" name="new_password" class="form-control" id="newPasswordInput"
                                    required>
                                <span class="input-group-text" id="toggleNewPassword" style="cursor: pointer;">
                                    <i class="bx bx-show"></i>
                                </span>
                            </div>
                        </div>

                        <!-- Confirm Password with Show/Hide -->
                        <div class="mb-3">
                            <label class="form-label">Confirm Password</label>
                            <div class="input-group">
                                <input type="password" name="confirm_password" class="form-control"
                                    id="confirmPasswordInput" required>
                                <span class="input-group-text" id="toggleConfirmPassword" style="cursor: pointer;">
                                    <i class="bx bx-show"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                            id="cancelModalBtn">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- View Driver Modal -->
    <div class="modal fade" id="viewDriverModal" tabindex="-1" aria-labelledby="viewDriverModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bus Driver Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="closeViewModalBtn"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6"><strong>Bus Number:</strong> <span id="viewBusNumber"></span></div>
                        <div class="col-md-6"><strong>Driver Name:</strong> <span id="viewDriverName"></span></div>
                        <div class="col-md-6"><strong>Driver Phone:</strong> <span id="viewDriverPhone"></span></div>
                        <div class="col-md-6"><strong>Attendant Name:</strong> <span id="viewAttendantName"></span></div>
                        <div class="col-md-6"><strong>Attendant Phone:</strong> <span id="viewAttendantPhone"></span>
                        </div>
                        <div class="col-md-6"><strong>Route Name:</strong> <span id="viewRouteName"></span></div>
                        <div class="col-md-6"><strong>Show Attendant Phone On Driver App:</strong> <span
                                id="viewShowPhoneFlag"></span></div>

                        <div class="d-flex justify-content-start gap-4 mt-3 flex-wrap">
                            <div id="driverPhotoBlock" style="display: none; text-align: center;">
                                <strong>Driver Photo</strong><br>
                                <img id="viewDriverPhoto" class="img-thumbnail mt-1"
                                    style="height: 100px; width: 100px; margin-right: 150px;">
                            </div>

                            <div id="driverLicenseBlock" style="display: none; text-align: center;">
                                <strong>License Photo</strong><br>
                                <img id="viewDriverLicensePhoto" class="img-thumbnail mt-1"
                                    style="height: 100px; width: 100px; margin-right: 150px;">
                            </div>

                            <div id="attendantPhotoBlock" style="display: none; text-align: center;">
                                <strong>Attendant Photo</strong><br>
                                <img id="viewAttendantPhoto" class="img-thumbnail mt-1"
                                    style="height: 100px; width: 100px; ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // Step 1: Fill bus number & driver ID when clicking the dropdown
            $('.change-password-btn').on('click', function() {
                const driverId = $(this).data('driver-id');
                const busNumber = $(this).data('bus-number');

                $('#driverId').val(driverId);
                $('#busNumberDisplay').text(busNumber);
            });

            // Step 2: Toggle New Password
            $('#toggleNewPassword').on('click', function() {
                const input = $('#newPasswordInput');
                const icon = $(this).find('i');
                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    icon.removeClass('bx-show').addClass('bx-hide');
                } else {
                    input.attr('type', 'password');
                    icon.removeClass('bx-hide').addClass('bx-show');
                }
            });

            // Step 3: Toggle Confirm Password
            $('#toggleConfirmPassword').on('click', function() {
                const input = $('#confirmPasswordInput');
                const icon = $(this).find('i');
                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    icon.removeClass('bx-show').addClass('bx-hide');
                } else {
                    input.attr('type', 'password');
                    icon.removeClass('bx-hide').addClass('bx-show');
                }
            });

            // Step 4: Clear form on cancel or close
            $('#cancelModalBtn, #closeModalBtn').on('click', function() {
                $('#changePasswordForm')[0].reset();
            });

            // Step 5: Password strength checker
            function isStrongPassword(password) {
                return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(password);
            }

            // Step 6: AJAX submit
            $('#changePasswordForm').on('submit', function(e) {
                e.preventDefault();

                const newPassword = $('#newPasswordInput').val();
                const confirmPassword = $('#confirmPasswordInput').val();
                const driverId = $('#driverId').val();

                if (newPassword !== confirmPassword) {
                    alert('Passwords do not match!');
                    return;
                }

                if (!isStrongPassword(newPassword)) {
                    alert(
                        'Password must be at least 8 characters and include uppercase, lowercase, and a number.'
                    );
                    return;
                }

                $.ajax({
                    url: "/change-password",
                    method: "POST",
                    data: {
                        driver_id: driverId,
                        new_password: newPassword,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('Password changed successfully!');
                            $('#changePasswordForm')[0].reset();
                            $('#changePasswordModal').modal('hide');
                        } else {
                            alert(response.message || 'Error saving password.');
                        }
                    },
                    error: function() {
                        alert('Server error occurred.');
                    }
                });
            });

            // Step 7: Optional - reset fields when modal closes
            $('#changePasswordModal').on('hidden.bs.modal', function() {
                $('#changePasswordForm')[0].reset();
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('.view-driver-btn').on('click', function() {
                const driver = $(this).data('driver');

                $('#viewBusNumber').text(driver.bus_number || '-');
                $('#viewDriverName').text(driver.driver_name || '-');
                $('#viewDriverPhone').text(driver.driver_phone_number || '-');
                $('#viewAttendantName').text(driver.attendant_name || '-');
                $('#viewAttendantPhone').text(driver.attendant_phone_number || '-');
                $('#viewRouteName').text(driver.route_name || '-');
                $('#viewShowPhoneFlag').text(driver.attendant_phone_number_status ? 'Yes' : 'No');

                const CDN_URL = "{{ rtrim($cdn) }}"; // your base image path

                // Driver Photo
                if (driver.driver_photo) {
                    $('#driverPhotoBlock').show();
                    $('#viewDriverPhoto').attr('src', CDN_URL + driver.driver_photo);
                } else {
                    $('#driverPhotoBlock').hide();
                }

                // Driver License Photo
                if (driver.driver_license_photo) {
                    $('#driverLicenseBlock').show();
                    $('#viewDriverLicensePhoto').attr('src', CDN_URL + driver.driver_license_photo);
                } else {
                    $('#driverLicenseBlock').hide();
                }

                // Attendant Photo
                if (driver.attendant_photo) {
                    $('#attendantPhotoBlock').show();
                    $('#viewAttendantPhoto').attr('src', CDN_URL + driver.attendant_photo);
                } else {
                    $('#attendantPhotoBlock').hide();
                }
            });

            $('#closeViewModalBtn').on('click', function() {
                $('#viewDriverModal').find('span').text('');
                $('#viewDriverPhoto, #viewDriverLicensePhoto, #viewAttendantPhoto').attr('src', '');
                $('#driverPhotoBlock, #driverLicenseBlock, #attendantPhotoBlock').hide();
            });
        });
    </script>


    <script>
        $(document).ready(function() {
            $('.delete-driver-btn').on('click', function(e) {
                e.preventDefault();

                const id = $(this).data('id');
                const busNumber = $(this).data('bus-number');
                const row = $(this).closest('tr'); // If using table rows

                if (confirm(`Are you sure you want to delete ${busNumber}?`)) {
                    $.ajax({
                        url: `/busdrivers/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            _method: 'DELETE'
                        },
                        success: function(response) {
                            // Optional: Show success notification
                            toastr.success('Bus driver deleted successfully');
                            row.remove(); // Remove the row from table
                        },
                        error: function(xhr) {
                            toastr.error('Error deleting the bus driver');
                        }
                    });
                }
            });
        });
    </script>


@endsection