@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')

@endsection
@section('content')

<section>
    <div class="col-12 mt-4">
      <h2 class="page-title text-center">Create tour Application</h2>
      <div class="mb-2 heading-border"></div>
    </div>
  </section>
  <section class="px-3  pt-3 pt-lg-5 row">

    <div class="col-12 mb-4">
      <div class="blu-card d-flex flex-wrap">

          <div class="col-12">
               @if (session('success'))
                <div class="alert alert-success" id="hide-alert">
                    {{ session('success') }}
                </div>
              @endif
              @if ($errors->any())
                  <div class="alert alert-danger" id="hide-alert">
                      <ul>
                          @foreach ($errors->all() as $error)
                              <li>{{ $error }}</li>
                          @endforeach
                      </ul>
                  </div>
              @endif
          </div>



        <form class="leave-form col-12 col-md-6 border-right" action="{{route('employee.tour.store')}}" method="post">
          @csrf
            <div class="d-flex flex-wrap">


              <div class="form-group col-12">
                <label for="exampleInputEmail1">location</label>
                <input required  name="tour_location" class="form-control" type="text">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="exampleInputEmail1">from date</label>
                <input required id="start_date" name="from_date" class="form-control" type="date">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="exampleInputEmail1">to date</label>
                <input required id="end_date" name="to_date" class="form-control" type="date">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="exampleInputEmail1">Total Days</label>
                <input id="total_days" type="number" value="0" readonly class="form-control" name="total_days">
              </div>
           

              <div class="form-group col-12">
                <label for="exampleInputEmail1">Purpose</label>
                <textarea required placeholder="enter your tour reason" class="form-control" name="purpose" id="" cols="30" rows="3"></textarea>
              </div>
           

              <div class="form-group col-12">
                <input class="btn btn-success px-4" type="submit" value="Create">
              </div>
            </div>
          </form>
          <div class="col-md-6 col-12 px-md-0">

            <table class="table table-bordered table-hover">
              <thead class="">
                <tr>
                  <th colspan="4">Your Recent Tour history</th>
               
                </tr>
                <tr>
                  <th>Location</th>
                  <th>Tour Date</th>
                  <th>Duration</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
    
                @foreach ($tours as $th)
                <tr class="att-status-row">
               
                  <td>{{$th->tour_location}}</td>
                  <td>{{$th->from_date}}</td>
    
                  <td>
                    @php
                    $f = strtotime($th->from_date);
                    $t = strtotime($th->to_date);
                    $datediff = $t - $f;

                    echo round($datediff / (60 * 60 * 24))+1;
                      @endphp
                      Days
                  </td>
                  <td>
                    <span class="
                    {{
                      $th->status == 1 ? 'badge badge-success' :
                      ($th->status == 2 ? 'badge badge-danger' :
                      ($th->status == 3 ? 'badge badge-warning' : 'badge badge-primary'
                       ) )}}
                     px-2 py-1">
                     {{
                      $th->status == 1 ? 'Active' :
                      ($th->status == 2 ? 'rejected' :
                      ($th->status == 3 ? 'pending' : 'Completed'
                       ) )}}
    
                    </span></td>
                </tr>
                @endforeach
    
    
    
              </tbody>
            </table>
          </div>



        </div>
    </div>

  </section>


@endsection

@section('script')

<script>

   
  $("#end_date").on("change", function () {

    let start = $("#start_date").val();
      if (typeof start == "undefined" || start == "") {
          start = 0;
      }
      let end = $("#end_date").val();
      if (typeof end == "undefined" || end == "") {
          end = 0;
      }

      let diff = Math.floor((Date.parse(end) - Date.parse(start)) / 86400000);
      $("#total_days").val(diff + 1);

  });

  $('.js-example-basic-single').select2();

 
</script>
 
@endsection