@extends('layouts.user_type.auth')

@section('content') 

<div>
    <!-- <div class="alert alert-secondary mx-4" role="alert">
        <span class="text-white">
            <strong>Add, Edit, Delete features are not functional!</strong> This is a
            <strong>PRO</strong> feature! Click <strong>
            <a href="https://www.creative-tim.com/live/soft-ui-dashboard-pro-laravel" target="_blank" class="text-white">here</a></strong>
            to see the PRO product!
        </span>
    </div> -->
 
    <div class="row">
        <div class="col-12">
            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between">
                        <div>
                            <h5 class="mb-0">Tourist History</h5>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <label for="province">Province:</label>
                                <select class="form-select" id="province" name="province" style="height: 25px; font-size: 10px; padding-top: 0px;">
                                    <option value="">Select Province</option>
                                    @foreach($provinces as $province)
                                        <option value="{{ $province->province_id }}" data-province-name="{{ $province->province_name }}">{{ $province->province_name }}</option>
                                    @endforeach
                                </select>
                                @error('province')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label for="municipality">Municipality:</label>
                                <select class="form-select" id="municipality" name="municipality" style="height: 25px; font-size: 10px; padding-top: 0px;">
                                    <option value="">Select municipality</option>
                                    @foreach($municipalities as $municipality)
                                        <option value="{{ $municipality->municipality_id }}" data-province-name="{{ $municipality->municipality_name }}">{{ $municipality->municipality_name }}</option>
                                    @endforeach
                                </select>
                                @error('municipality')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label for="barangay">Barangay:</label>
                                <select class="form-select" id="barangay" name="barangay" style="height: 25px; font-size: 10px; padding-top: 0px;">
                                    <option value="">Select Barangay</option>
                                    @foreach($barangays as $barangay)
                                        <option value="{{ $municipality->municipality_id }}">{{ $municipality->municipality_name }}</option>
                                    @endforeach
                                </select>
                                @error('barangay')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label for="date">Date:</label>
                                <input type="date" class="form-control" id="date" name="date" style="height: 25px; font-size: 10px;">
                                @error('date')
                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- <a href="{{ url('register-staff') }}" class="btn bg-gradient-primary btn-sm mb-0" type="button">+&nbsp; New User</a> -->
                    </div>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <form action="">
                            @csrf
                            <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            ID
                                        </th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Name
                                        </th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Gender
                                        </th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Age
                                        </th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Address
                                        </th>
                                        <!-- <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Province
                                        </th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Municipality
                                        </th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Barangay
                                        </th> -->
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Date
                                        </th>
                                        <!-- <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Action
                                        </th> -->
                                    </tr>
                                </thead>
                                <tbody id="touristTableBody">
                                        @php
                                            $id = 1;
                                            $totalTourists = count($tourists); // Get the total number of tourists
                                        @endphp
                                        @foreach($tourists as $tourist)
                                            <tr>
                                                <td class="ps-4">
                                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $id++ }}</p>
                                                </td>
                                                <td class="text-center">
                                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $tourist->full_name }}</p>
                                                </td>
                                                <td class="text-center">
                                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $tourist->gender }}</p>
                                                </td>
                                                <td class="text-center">
                                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $tourist->age }}</p>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-secondary text-xs font-weight-bold" style="text-align: left;">{{ $tourist->address }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-secondary text-xs font-weight-bold" style="text-align: left;">{{ $tourist->date }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr>
                                            <td class="text-center" style="text-align: right;">
                                                <span class="text-secondary text-xs font-weight-bold" style="text-align: left;">Total Tourist : {{ $totalTourists }}</span> 
                                            </td>
                                        </tr>
                                    </tbody>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
@endsection
<script src="{{ asset('js/jquery-3.7.1.min.js') }}" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="{{ asset('js/sweetalert2@11.js') }}"></script>
<script>
    $(document).ready(function () {
        $('#province').change(function () {
            var provinceId = $(this).val();
            if (provinceId) {
                $.ajax({
                    type: "GET",
                    url: "municipalities/" + provinceId,
                    success: function (municipalities) {
                        console.log("Received municipalities:", municipalities);
                        $('#municipality').empty();
                        $('#barangay').empty();
                        $('#municipality').append('<option value="">Select Municipality</option>');
                        $.each(municipalities, function (key, value) {
                            $('#municipality').append('<option value="' + value.municipality_id + '">' + value.municipality_name + '</option>');
                        });
                    },
                    error:function(xhr, status, error){
                        console.log(xhr.responseText);
                    }
                });
            } else {
                $('#municipality').empty();
                $('#barangay').empty();
            }
        });

        $('#municipality').change(function () {
            var municipalityId = $(this).val();
            if (municipalityId) {
                $.ajax({
                    type: "GET",
                    url: "barangays/" + municipalityId,
                    success: function (barangays) {
                        $('#barangay').empty();
                        $('#barangay').append('<option value="">Select Barangay</option>');
                        $.each(barangays, function (key, value) {
                            $('#barangay').append('<option value="' + value.barangay_id + '">' + value.barangay_name + '</option>');
                        });
                    }
                });
            } else {
                $('#barangay').empty();
            }
        });
    });
</script>

<!-- province -->
<script>
$(document).ready(function() {
    $('#province').change(function() {
        var provinceName = $(this).find(':selected').data('province-name');
        console.log('Selected province:', provinceName);

        $.ajax({
            url: 'fetch-tourists',
            type: 'GET',
            data: {province_name: provinceName},
            dataType: 'json',
            beforeSend:function(){
                $('#touristTableBody').html('<tr><td colspan="3" style="text-align:center; margin-left:50px;">Fetching............</td></tr>');
            },
            success: function(data) {
                console.log('Response from server:', data);
                $('#touristTableBody').empty();
                var id = 1;
                var totalTourists = 0;
                $.each(data, function(index, tourist) {
                    var newRow = '<tr>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + id++ + ' </p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.full_name + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.gender + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.age + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.address + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.date + '</p></td>' +
                        '</tr>';
                    $('#touristTableBody').append(newRow);
                    totalTourists++; 
                });
                var totalRow = '<tr><td class="text-center" style="text-align: right;"><span class="text-secondary text-xs font-weight-bold" style="text-align: left;">' + 'Total Tourist : ' + totalTourists + '</span></td></tr>';
                $('#touristTableBody').append(totalRow);
            },
            error: function(xhr, status, error) {
                console.error('Error fetching tourist data:', error);
                console.log(xhr.responseText);
            }
        });
    });
});
</script>

<!-- municipality -->
<script>
$(document).ready(function(){
    $('#municipality').change(function() {
        var provinceName = $('#province').find(':selected').data('province-name');
        var municipalityName = $(this).find('option:selected').text();
        console.log('Selected municipality:', municipalityName);

        $.ajax({
            url: 'fetch-tourists-municipality',
            type: 'GET',
            data: { province_name: provinceName, municipality_name: municipalityName },
            dataType: 'json',
            beforeSend:function(){
                $('#touristTableBody').html('<tr><td colspan="3" style="text-align:center; margin-left:50px;">Fetching............</td></tr>');
            },
            success: function(data) {
                console.log('Response from server:', data);
                $('#touristTableBody').empty();
                var id = 1;
                var totalTourists = 0;
                $.each(data, function(index, tourist) {
                    var newRow = '<tr>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + id++ + ' </p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.full_name + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.gender + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.age + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.address + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.date + '</p></td>' +
                        '</tr>';
                    $('#touristTableBody').append(newRow);
                    totalTourists++;
                });
                var totalRow = '<tr><td class="text-center" style="text-align: right;"><span class="text-secondary text-xs font-weight-bold" style="text-align: left;">' + 'Total Tourist : ' + totalTourists + '</span></td></tr>';
                $('#touristTableBody').append(totalRow);
            },
            error: function(xhr, status, error) {
                console.error('Error fetching tourist data:', error);
                console.log(xhr.responseText);
            }
        });
    });
});
</script>
<!-- barangay -->
<script>
$(document).ready(function(){
    $('#barangay').change(function() {
        var provinceName = $('#province').find(':selected').data('province-name');
        var municipalityName = $('#municipality').find(':selected').text();
        var barangayName = $(this).find('option:selected').text();
        console.log('Selected province:', provinceName);
        console.log('Selected municipality:', municipalityName);
        console.log('Selected barangay:', barangayName);

        $.ajax({
            url: 'fetch-tourists-barangay',
            type: 'GET',
            data: { 
                province_name: provinceName, 
                municipality_name: municipalityName, 
                barangay_name: barangayName },
            dataType: 'json',
            beforeSend:function(){
                $('#touristTableBody').html('<tr><td colspan="3" style="text-align:center; margin-left:50px;">Fetching............</td></tr>');
            },
            success: function(data) {
                console.log('Response from server:', data);
                $('#touristTableBody').empty();
                var id = 1;
                var totalTourists = 0;
                $.each(data, function(index, tourist) {
                    var newRow = '<tr>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + id++ + ' </p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.full_name + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.gender + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.age + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.address + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.date + '</p></td>' +
                        '</tr>';
                    $('#touristTableBody').append(newRow);
                    totalTourists++;
                });
                var totalRow = '<tr><td class="text-center" style="text-align: right;"><span class="text-secondary text-xs font-weight-bold" style="text-align: left;">' + 'Total Tourist : ' + totalTourists + '</span></td></tr>';
                $('#touristTableBody').append(totalRow);
            },
            error: function(xhr, status, error) {
                console.error('Error fetching tourist data:', error);
                console.log(xhr.responseText);
            }
        });
    });
});
</script>
<!-- date -->
<script>
$(document).ready(function(){
    $('#date').change(function() {
        var provinceName = $('#province').find(':selected').data('province-name');
        var municipalityName = $('#municipality').find(':selected').text();
        var barangayName = $("#barangay").find('option:selected').text();
        var date = $("#date").val();
        console.log('Selected province:', provinceName);
        console.log('Selected municipality:', municipalityName);
        console.log('Selected barangay:', barangayName);
        console.log('Selected date:', date);

        $.ajax({
            url: 'fetch-tourists-date',
            type: 'GET',
            data: { 
                province_name: provinceName, 
                municipality_name: municipalityName, 
                barangay_name: barangayName,
                date: date
            },
            dataType: 'json',
            beforeSend:function(){
                $('#touristTableBody').html('<tr><td colspan="3" style="text-align:center; margin-left:50px;">Fetching............</td></tr>');
            },
            success: function(data) {
                console.log('Response from server:', data);
                $('#touristTableBody').empty();
                var id = 1;
                var totalTourists = 0;
                $.each(data, function(index, tourist) {
                    var newRow = '<tr>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + id++ + ' </p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.full_name + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.gender + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.age + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.address + '</p></td>' +
                        '<td> <p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + tourist.date + '</p></td>' +
                        '</tr>';
                    $('#touristTableBody').append(newRow);
                    totalTourists++;
                });
                var totalRow = '<tr><td class="text-center" style="text-align: right;"><span class="text-secondary text-xs font-weight-bold" style="text-align: left;">' + 'Total Tourist : ' + totalTourists + '</span></td></tr>';
                $('#touristTableBody').append(totalRow);
            },
            error: function(xhr, status, error) {
                console.error('Error fetching tourist data:', error);
                console.log(xhr.responseText);
            }
        });
    });
});
</script>