@extends('layouts/app')
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <!-- <h1 class="m-0">Starter Page</h1> -->
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">Reports</li>
                        <li class="breadcrumb-item"><a href="{{ route('reports.ticketScan') }}">Ticket Scan</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="container mt-3">
                            <form action="{{ route('reports.ticketScan') }}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">Region</label>
                                            <div class='input-group'>
                                                @php 
                                                    $region = Config('config.region.value'); 
                                                @endphp
                                                @if (Auth::user()->userIsHQBranchs())
                                                    <select class="form-control" id="region" name="region">
                                                        <option value="" selected>--All--</option>
                                                        @foreach ($region as $key => $rg)
                                                        <option value="{{ $key }}" {{ $key == ($_POST['region'] ?? '') ? 'selected' : '' }}>{{ $rg['name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <select class="form-control" name="region">
                                                        @foreach ($branch_region as $key)
                                                        <option value="{{ $key }}" {{ $key == ($_POST['region'] ?? '') ? 'selected' : '' }}>{{ $region[$key]['name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">Branch</label>
                                            <div class='input-group date datetimepicker' id='datetimepicker2'>
                                                @if (Auth::user()->userIsHQBranchs())
                                                    <select class="form-control" name="branch_id">
                                                        @if (!empty($branches))
                                                            <option value="" selected>--All--</option>
                                                            @foreach ($branches as $branch)
                                                                <option value="{{ $branch->id }}"
                                                                    {{ $branch->id == ($_POST['branch_id'] ?? '') ? 'selected' : '' }}>
                                                                    {{ $branch->code }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                @else
                                                    <select class="form-control" name="branch_id">
                                                        <option value="{{ Session::get('branch')->id }}">
                                                            {{ Session::get('branch')->code }}
                                                        </option>
                                                    </select>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">From Date</label>
                                            <div class='input-group date datetimepicker' id='datetimepicker1'>
                                                <input type='date' value="{{ $_POST['from_date'] ?? date('Y-m-d') }}"
                                                    class="form-control" name="from_date" id="from_date" max="{{date('Y-m-d')}}"/>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">End Date</label>
                                            <div class='input-group date datetimepicker' id='datetimepicker2'>
                                                <input type='date' value="{{ $_POST['end_date'] ?? date('Y-m-d') }}"
                                                    class="form-control" name="end_date" id="end_date" max="{{date('Y-m-d')}}"/>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">Select Terminal</label>
                                            <div class='input-group date datetimepicker' id='datetimepicker2'>
                                                <select class="form-control" name="terminal_id">
                                                    @if (!empty($terminals))
                                                        <option value="" selected>--All--</option>
                                                        @foreach ($terminals as $terminal)
                                                            <option value="{{ $terminal }}"
                                                                {{ $terminal == ($_POST['terminal_id'] ?? '') ? 'selected' : '' }}>
                                                                {{ $terminal }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm">

                                        <div class="form-group">
                                            <label class="control-label"><span class="right badge badge-light"><a
                                                        href="{{ route('reports.ticketScan') }}">clear <i
                                                            class="fa-solid fa-rotate-right"></i></a></span></label>
                                            <div class='input-group date datetimepicker' id='datetimepicker2'>
                                                <button type="submit" class="btn btn-success">Show report</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label text-white">---</label>
                                            <div class='input-group date datetimepicker' id='datetimepicker2'>

                                                <a href="{{ route('reports.downloadTicketScan', [
                                                    'from_date' => $_POST['from_date'] ?? '',
                                                    'end_date' => $_POST['end_date'] ?? '',
                                                    'branch_id' => $_POST['branch_id'] ?? '',
                                                    'terminal_id' => $_POST['terminal_id'] ?? '',
                                                ]) }}"
                                                    class="btn btn-outline-success"><strong><i class="fa fa-file-excel-o"
                                                            aria-hidden="true"></i></strong>
                                                    Export </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        @if (Session::has('error'))
                            <div class="alert alert-warning alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h5><i class="icon fas fa-check"></i> Note:</h5>
                                @foreach(Session::get('error') as $err)
                                    {{ $err }}<br>
                                @endforeach
                                @php
                                    Session::forget('error');
                                @endphp
                            </div>
                        @endif

                        <div class="card-body table-responsive p-0">
                            @if (!empty($ticket_scan_lists))
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Branch</th>
                                            <th>Kiosk</th>
                                            <th>Scan time</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($ticket_scan_lists as $key => $ticket_scan_list)
                                            <tr>
                                                <td>{{ ++$key }}</td>
                                                <td>{{ $ticket_scan_list->date }}</td>
                                                <td>{{ $ticket_scan_list->branch }}</td>
                                                <td>{{ $ticket_scan_list->terminal_id }}</td>
                                                <td>{{ $ticket_scan_list->scan_time }}</td>
                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            @else
                                <p class="text-center">No data found</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('js')
<script nonce="{{ csp_nonce() }}">

    // $('input[name="from_date"]').on('change', function() {
    //     var value =  $(this).val();

    //     var today = new Date();
    //     var tyear = today.getFullYear();
    //     var tmonth = (today.getMonth() + 1).toString().padStart(2, '0');
    //     var tday = today.getDate().toString().padStart(2, '0');

    //     var newDate = new Date(value);
    //     newDate.setMonth(newDate.getMonth() + 1);
    //     var year = newDate.getFullYear();
    //     var month = (newDate.getMonth() + 1).toString().padStart(2, '0');
    //     var day = newDate.getDate().toString().padStart(2, '0');

    //     var formattedDate = year + '-' + month + '-' + day;
    //     var tformattedDate = tyear + '-' + tmonth + '-' + tday;

    //     fdate = $('#from_date').val();
    //     edate = $('#end_date').val();

    //     if(new Date(formattedDate) > new Date(tformattedDate)) {
    //         $('#end_date').val(tformattedDate);
    //     }
    //     else if((new Date(edate) > new Date(formattedDate)) || (new Date(edate) < new Date(fdate))) {
    //         $('#end_date').val(formattedDate);
    //     }

    //     // $('#end_date').attr("min", value);
    //     $('#end_date').attr("max", tformattedDate);
    // });

    // $('input[name="end_date"]').on('change', function() {
    //     var value =  $(this).val();

    //     var newDate = new Date(value);
    //     newDate.setMonth(newDate.getMonth() - 1);
    //     var year = newDate.getFullYear();
    //     var month = (newDate.getMonth() + 1).toString().padStart(2, '0');
    //     var day = newDate.getDate().toString().padStart(2, '0');

    //     var formattedDate = year + '-' + month + '-' + day;

    //     fdate = $('#from_date').val();
    //     edate = $('#end_date').val();
        
    //     if((new Date(fdate) < new Date(formattedDate)) || (new Date(edate) < new Date(fdate))) {
    //         $('#from_date').val(formattedDate);
    //     }
    // });

    $('select[name="branch_id"]').on('change', function() {
        var branch_id =  $(this).val();
        $.ajax({
            type: 'get',
            url: '{{ route('reports.getTerminalForBranch') }}',
            data: { 'branch_id': branch_id },
            dataType: 'json',
            success: function(data) {
                $('select[name="terminal_id"]').empty();
                $('select[name="terminal_id"]').html('<option value="">--All--</option>');
                $.each(data, function(key, value) {
                    $('select[name="terminal_id"]').append('<option value="'+ value +'" {{ '+ value +' == ($_POST["terminal_id"] ?? '') ? "selected" : "" }}>'+ value +'</option>');
                });
            }
        });
    });

    $('select[name="region"]').on('change', function() {
        var region =  $(this).val();
        $.ajax({
            type: 'get',
            url: '{{ route('reports.getBranchForRegion') }}',
            data: { 'region': region },
            dataType: 'json',
            success: function(data) {
                $('select[name="branch_id"]').empty();
                $('select[name="branch_id"]').html('<option value="">--All--</option>');
                $.each(data, function(key, value) {
                    $('select[name="branch_id"]').append('<option value="'+ value.id +'" {{ '+ value.id +' == ($_POST["branch_id"] ?? '') ? "selected" : "" }}>'+ value.code +'</option>');
                });
            }
        });
    });
</script>
@stop