@extends('layouts.appv2')

@section('content')

                            <h1 class="mb-4 gradient-text">Designation & Checkin Reason</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
                                <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>Manage Designation</h5>
                                            <div class="btn-toolbar mb-2 mb-md-0">
                                                <a class="btn-sm btn-outline-primary" href="{{ route('admins.designationadd') }}" style="border-radius: 50px; font-weight:bolder;"title="Add employee">
                                                <i class="fa-solid fa-plus" style="border-radius: 20px;"></i> Add
                                                </a>
                                            </div>
                                        </div>
                                    </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">Description</th>
                                                        <th class="text-center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $counter = 0;
                                                    @endphp

                                                    @foreach($designation as $designation)
                                                        <tr>
                                                            <td class="col-1 text-center">{{ ++$counter }}</td>
                                                            <td class="col-1 text-center">{{$designation->designation_name}}</td>
                                                            <td class="col-1 text-center">{{$designation->description}}</td>
                                                            <td class="col-1 text-center">
                                                            <a class="btn btn-sm btn-info" href="{{ route('admins.designationedit', ['designation_id' => $designation->designation_id])}}">
                                                                <i class="fa-solid fa-pen-to-square"></i> Edit
                                                            </a>
                                                            <form action="{{ route('admins.designationdelete', ['designation_id' => $designation->designation_id]) }}" method="POST" 
                                                                onsubmit="return confirm('Are you sure you want to delete this designation?');" style="display: inline;">
                                                                @csrf
                                                                <button type="submit" class="btn btn-sm btn-danger">
                                                                    <i class="fas fa-trash"></i> Delete
                                                                </button>                                                            
                                                            </form>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>



                                <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">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>
                                                    </tr>
                                                @endforeach
                                            </tbody>

                                        </table>
                                    </div>
                                </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 Reason</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 for="name">Reason 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 Reason</button>
                                            </div>
                                        </form>
                                    </div>
                                </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 Reason</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">Reason Name</label>
                                                        <input name="name" type="text" class="form-control" id="editReasonName" placeholder="Reason Name" >
                                                    </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>



<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCONxWCXBdM26TGw7S3RR7W9hH804gM2H0"></script>
<script>


function openPopup(button, type, reasonId) {
    // Get data attributes from the clicked button
    var name = $(button).data('name'); // Extract name
    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('#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
}





    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>
@endsection