@extends('layouts.user_type.auth')

@section('content')

<main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <form action="">
          @csrf
          <input type="hidden" id="tokenId" value="{{ csrf_token() }}">
        <div class="card mb-4">
          <div class="card-header pb-0">
            <div class="row align-items-center">
              <div class="col">
                <h6>Reports</h6>
              </div>
              <div class="col-md-4">
                  <div class="row">
                      <div class="col-md-6">
                        <label for="selectedDate">Select Date:</label>
                          <input type="date" class="form-control" id="selectedDate" name="date" style="height: 25px; width: 100px; font-size: 10px; margin-right: 10px;">
                          @error('date')
                          <p class="text-danger text-xs mt-2">{{ $message }}</p>
                          @enderror
                      </div>
                      <div class="col-md-6">
                          <a href="#" id="download-btn" class="btn bg-gradient-primary btn-sm mb-0" style="height: 30px;" type="button">Download</a>
                      </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="card-body px-0 pt-0 pb-2">
            <div class="table-responsive p-0">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center;">Tourist Name</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center;">Gender</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center;">Age</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center;">Address</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center;">Date of Visit</th>
                  </tr>
                </thead>
                <tbody id="touristTableBody">
                </tbody>
              </table>
            </div>
          </div>
        </div>
        </form>
      </div>
    </div>
  </div>
</main>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompdf/0.8.5/dompdf.min.js"></script>
<script>
 $(document).ready(function() {
    $('#selectedDate').change(function() {
      var selectedDate = $(this).val();
      $.ajax({
        url: 'totalTourist',
        method: 'GET',
        data: {
          date: selectedDate,
          _token: $("#tokenId").val()
        },
        beforeSend:function(){
          $('#touristTableBody').html('<tr><td colspan="3" style="text-align:center; margin-left:50px;">Fetching............</td></tr>');
        },
        success: function(response) {
          $('#touristTableBody').empty();
          var totalTourists = 0;
          $.each(response.tourists, function(index, tourist) {
            $('#touristTableBody').append(
              '<tr>' +
                  '<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>'
            );

            totalTourists++;
          });
          $('#touristTableBody').append('<tr><td colspan="5"><p class="text-xs font-weight-bold mb-0" style="text-align: left;">' + 'Total Tourist : ' + totalTourists + '</p></td></tr>');
        },
        error: function(xhr, status, error) {
          console.error(xhr.responseText);
        }
      });
    });
});
</script>
  <script>
  $(document).ready(function(){
    $('#download-btn').click(function() {
        var selectedDate = $('#selectedDate').val();
        $.ajax({
            url: 'download-reports',
            method: 'get',
            data: {
                date: selectedDate,
                _token: $("#tokenId").val()
            },
            beforeSend: function() {
                $('#download-btn').html("Downloading...");
                $('#download-btn').prop("disabled", true);
            },
            success: function(data) {
              $('#download-btn').html("Downloaded");
              $('#download-btn').prop("disabled", false);
              window.location.href = data.download_url;
            },
            error: function(xhr, status, error) {
              console.error(xhr.responseText);
              $('#download-btn').html("Download");
              $('#download-btn').prop("disabled", false);
            }
        });
    });
  });
  </script>