@extends('layouts.appv2')

@section('content')

    <h1 class="mb-4 gradient-text">Checkin Location</h1>  			
    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

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

    <!-- Group Location Selection -->
    <div class="card mb-4" style="border-radius: 20px;">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5>Check-in Location Groups</h5>
            <!-- <a class="btn-sm" data-toggle="modal" data-target="#addGroupModal">Add Group</a> -->
            <a class="btn-sm" style="border-radius: 50px; font-weight: bolder; cursor: pointer;" data-toggle="modal"
                data-target="#addGroupModal" title="Add Group">
                <i class="fa-solid fa-plus" style="border-radius: 20px;"></i> Add Group
            </a>
        </div>

        <div class="card-body">
            <table class="table table-bordered">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center">No.</th>
                        <th class="text-center">Group Name</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($groups as $index => $group)
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td class="text-center">{{ $group->name }}</td>
                            <!-- <td class="text-center">
                                <a class="btn btn-sm btn-info text-white"
                                    data-toggle="modal"
                                    data-target="#editGroupModal"
                                    data-id="{{ $group->id }}"
                                    data-name="{{ $group->name }}"
                                    onclick="openEditGroup(this)">
                                    <i class="fa-solid fa-pen-to-square"></i> Edit
                                </a>
                            </td> -->

                            <td class="text-center">
                                <a class="btn btn-sm btn-info text-white"
                                    data-toggle="modal"
                                    data-target="#editGroupModal"
                                    data-id="{{ $group->id }}"
                                    data-name="{{ $group->name }}"
                                    onclick="openEditGroup(this)">
                                    <i class="fa-solid fa-pen-to-square"></i> Edit
                                </a>

                                <button class="btn btn-sm btn-danger"
                                    onclick="confirmDeleteGroup({{ $group->id }})">
                                    <i class="fa-solid fa-trash"></i> Delete
                                </button>
                            </td>

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

    <!-- Location Selection -->
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5>Checkin Reason</h5>
                <div class="btn-toolbar mb-2 mb-md-0" data-toggle="modal" data-target="#addReason">
                    <a class="btn-sm" style="border-radius: 50px; font-weight:bolder; cursor:pointer;" title="Add Reason">
                        <i class="fa-solid fa-plus" style="border-radius: 20px;"></i> Add
                    </a>
                </div>
            </div>
        </div>

        <!-- Map Container -->
        <div id="mapContainer" style="height: 400px; width: 100%; border-radius: 10px; margin-bottom: 20px;"></div>
            <div class="card-body">
                <div class="dt-responsive table-responsive">
                    <table id="dom-table" class="table table-bordered nowrap">
                        <thead class="thead-dark">
                            <tr>
                                <th class="text-center">No.</th>
                                <th class="text-center">Name</th>
                                <th class="text-center">Group</th>
                                <th class="text-center">Availability</th>
                                <th class="text-center">Latitude</th>
                                <th class="text-center">Longitude</th>
                                <th class="text-center">Radius</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $counter = 0; @endphp
                            @foreach($reason as $reason)
                                <tr onclick="updateMap({{ $reason->lat }}, {{ $reason->long }}, {{ $reason->radius }})">
                                    <!-- <td class="col-1 text-center">{{ ++$counter }}</td>
                                    <td class="col-1 text-center">{{ $reason->name }}</td>
                                    <td class="col-1 text-center">{{ $reason->availability }}</td>
                                    <td class="col-1 text-center">{{ $reason->lat }}</td>
                                    <td class="col-1 text-center">{{ $reason->long }}</td>
                                    <td class="col-1 text-center">{{ $reason->radius }}</td>
                                    <td class="col-1 text-center">
                                        <a class="btn btn-sm btn-info text-white" 
                                        onclick="openPopup(this, 'reason', {{ $reason->reason_id }})" 
                                        data-toggle="modal" 
                                        data-target="#editReason" 
                                        data-name="{{ $reason->name }}" 
                                        data-availability="{{ $reason->availability }}" 
                                        data-lat="{{ $reason->lat }}" 
                                        data-long="{{ $reason->long }}" 
                                        data-radius="{{ $reason->radius }}">
                                            <i class="fa-solid fa-pen-to-square"></i> Edit
                                        </a>
                                    </td> -->

                                    <td class="text-center action-column">{{ ++$counter }}</td>
                                    <td class="text-center action-column">{{ $reason->name }}</td>
                                    <td class="text-center action-column">{{ $reason->group_name }}</td>
                                    <td class="text-center action-column">{{ $reason->availability }}</td>
                                    <td class="text-center action-column">{{ $reason->lat }}</td>
                                    <td class="text-center action-column">{{ $reason->long }}</td>
                                    <td class="text-center action-column">{{ $reason->radius }}</td>
                                    <td class="text-center action-column">
                                        <a class="btn btn-sm btn-info text-white"
                                            onclick="openPopup(this, 'reason', {{ $reason->reason_id }})"
                                            data-toggle="modal"
                                            data-target="#editReason"
                                            data-name="{{ $reason->name }}"
                                            data-group-id="{{ $reason->group_id }}"
                                            data-availability="{{ $reason->availability }}"
                                            data-lat="{{ $reason->lat }}"
                                            data-long="{{ $reason->long }}"
                                            data-radius="{{ $reason->radius }}">
                                            <i class="fa-solid fa-pen-to-square"></i> Edit
                                        </a>

                                        <button class="btn btn-sm btn-danger"
                                            onclick="confirmDeleteReason({{ $reason->reason_id }})">
                                            <i class="fa-solid fa-trash"></i> Delete
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>
                </div>
            </div>
        </div>

        <!-- Add Group Modal -->
        <div class="modal fade" id="addGroupModal" tabindex="1">
            <div class="modal-dialog">
                <form method="POST" action="{{ route('admins.storeCheckinLocationGroup') }}">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5>Add Location Group</h5>
                            <button class="close" data-dismiss="modal">&times;</button>
                        </div>
                    
                        <div class="modal-body">
                            <label>Group Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Add Reason Modal -->
        <div class="modal fade" id="addReason" tabindex="-1" role="dialog" aria-labelledby="addReasonLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addReasonLabel">Add Location</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{ route('admins.addreason') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label>Location Group</label>
                                    <select name="group_id" class="form-control" required>
                                        <option value="">-- Select Group --</option>
                                        @foreach($groups as $group)
                                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="name">Location Name</label>
                                    <input name="name" type="text" class="form-control" id="exampleInputName" placeholder="Reason Name" style="border-radius: 10px;" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="availability">Availability</label>
                                    <select name="availability" class="form-control" required>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="lat">Latitude</label>
                                    <input name="lat" type="text" class="form-control" placeholder="Enter Latitude" required>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="long">Longitude</label>
                                    <input name="long" type="text" class="form-control" placeholder="Enter Longitude" required>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="radius">Radius</label>
                                    <input name="radius" type="number" class="form-control" placeholder="Enter Radius" required>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add Location</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Edit Group Modal -->
        <div class="modal fade" id="editGroupModal" tabindex="1">
            <div class="modal-dialog">
                <form method="POST" action="{{ route('admins.updateCheckinLocationGroup') }}">
                    @csrf
                    <input type="hidden" name="group_id" id="editGroupId">

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5>Edit Location Group</h5>
                            <button class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <div class="modal-body">
                            <label>Group Name</label>
                            <input type="text" name="name" id="editGroupName" class="form-control" required>
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Edit Reason Modal -->
        <div class="modal fade" id="editReason" tabindex="-1" role="dialog" aria-labelledby="editReasonLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editReasonLabel">Edit Location</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="editReasonForm" method="POST" action="{{ route('admins.updateReason') }}">
                        @csrf
                        <input type="hidden" name="reason_id" id="reasonId">
                        <div class="modal-body">
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="editReasonName">Location Name</label>
                                    <input name="name" type="text" class="form-control" id="editReasonName" placeholder="Reason Name" >
                                </div>
                                <div class="form-group col-md-12">
                                    <label>Location Group</label>
                                    <select name="group_id" class="form-control" id="editGroup" required>
                                        <option value="">-- Select Group --</option>
                                        @foreach($groups as $group)
                                            <option value="{{ $group->id}}">{{ $group->name }}</option>
                                        @endforeach
                                    </select>
                                <div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="editAvailability">Availability</label>
                                    <select name="availability" class="form-control" id="editAvailability" >
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="editLat">Latitude</label>
                                    <input name="lat" type="text" class="form-control" id="editLat" placeholder="Enter Latitude" >
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="editLong">Longitude</label>
                                    <input name="long" type="text" class="form-control" id="editLong" placeholder="Enter Longitude" >
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="editRadius">Radius</label>
                                    <input name="radius" type="number" class="form-control" id="editRadius" placeholder="Enter Radius" >
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Update Reason</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <form id="deleteGroupForm" method="POST" style="display:none;">
            @csrf
        </form>

        {{-- Delete Location --}}
        <form id="deleteReasonForm" method="POST" style="display:none;">
            @csrf
        </form>

    </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCONxWCXBdM26TGw7S3RR7W9hH804gM2H0"></script>
    <script>
        // Function to open the edit popup and populate fields
        function openPopup(button, type, reasonId) {
            // Get data attributes from the clicked button
            var name = $(button).data('name'); // Extract name
            var groupId = $(button).data('group-id'); // Group location
            var availability = $(button).data('availability'); // Extract availability
            var lat = $(button).data('lat'); // Extract latitude
            var long = $(button).data('long'); // Extract longitude
            var radius = $(button).data('radius'); // Extract radius

            // Get the modal
            var modal = $('#editReason');

            // Populate modal fields
            modal.find('#reasonId').val(reasonId); // Set reason ID
            modal.find('#editReasonName').val(name); // Set reason name
             modal.find('#editGroup').val(groupId)
            modal.find('#editAvailability').val(availability); // Set availability
            modal.find('#editLat').val(lat); // Set latitude
            modal.find('#editLong').val(long); // Set longitude
            modal.find('#editRadius').val(radius); // Set radius
        }

        function openEditGroup(button) {
            const groupId = $(button).data('id');
            const groupName = $(button).data('name');

            $('#editGroupId').val(groupId);
            $('#editGroupName').val(groupName);
        }

        // Function to confirm deletion of location group
        function confirmDeleteGroup(groupId) {
            Swal.fire({
                title: 'Are you sure?',
                text: 'This location group will be deleted permanently.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.getElementById('deleteGroupForm');
                    form.action = `/admins/checkin-location-group/delete/${groupId}`;
                    form.submit();
                }
            });
        }

        function confirmDeleteReason(reasonId) {
            Swal.fire({
                title: 'Are you sure?',
                text: 'This check-in location will be deleted permanently.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.getElementById('deleteReasonForm');
                    form.action = `/admins/checkin-location/delete/${reasonId}`;
                    form.submit();
                }
            });
        }

        let map, marker, circle;

        // Initialize the map
        function initMap() {
            const initialLocation = { lat: 0, lng: 0 }; // Default to coordinates 0,0

            map = new google.maps.Map(document.getElementById("mapContainer"), {
                center: initialLocation,
                zoom: 2, // Set default zoom
            });

            marker = new google.maps.Marker({
                position: initialLocation,
                map: map,
            });

            circle = new google.maps.Circle({
                map: map,
                radius: 0, // No radius initially
                fillColor: "#FF0000",
                fillOpacity: 0.2,
                strokeColor: "#FF0000",
                strokeOpacity: 0.5,
                strokeWeight: 1,
            });
        }

        // Update map with new location and radius
        function updateMap(lat, lng, radius) {
            const location = { lat: parseFloat(lat), lng: parseFloat(lng) };

            map.setCenter(location);
            map.setZoom(14);

            marker.setPosition(location);

            circle.setCenter(location);
            circle.setRadius(parseFloat(radius) || 0);
        }

        // Load the map when the page is ready
        document.addEventListener("DOMContentLoaded", function () {
            initMap();
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bs5-datepicker@1.2.0/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection