@extends('layouts.admin')

@section('title', 'Report List')
@section('content-header', 'Report List')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('reports.store') }}" target="_blank" method="POST" enctype="multipart/form-data">
            @csrf
                <div class="form-group">
                    <label for="branch">Branch</label>
                    <select name="branch" class="form-control @error('branch') is-invalid @enderror" id="branch">
                        @foreach ($branch_access as $key => $value)
                            @if ($branch_default == $value)
                                <option value="{{ $value }}" selected>{{ $value }}</option>
                            @else
                                <option value="{{ $value }}">{{ $value }}</option>
                            @endif
                        @endforeach
                    </select>
                    @error('branch')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="report_type">Report Type</label>
                    <select name="report_type" class="form-control @error('report_type') is-invalid @enderror" id="report_type" onchange="show_report_column_list()">
                        <option disabled selected>-SELECT-</option>
                        <option value="POS_Group_Sales" {{ old('report_type') === 'POS_Group_Sales' ? 'selected' : ''}}>POS Group Sales</option>
                        <option value="POS_Transactions_Day_Summary" {{ old('report_type') === 'POS_Transactions_Day_Summary' ? 'selected' : ''}}>POS Transactions Day Summary</option>
                        <option value="POS_Transactions_Weekly_Summary" {{ old('report_type') === 'POS_Transactions_Weekly_Summary' ? 'selected' : ''}}>POS Transactions Weekly Summary</option>
                    </select>
                    @error('report_type')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="report_type">Report Column</label>
                    <small><span style="color: red; font-weight: bold">Mandatory (*)</span></small>
                    <ul class="data-listing" id="report-column-listing">
                        <li style="color: red; font-weight: bold"> - Please Choose Report Type - </li>
                    </ul>
                </div>

                <div class="form-group">
                    <label for="start_date">Start Date</label>
                    <input type="date" name="start_date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" value="{{ old('start_date') }}">
                    @error('start_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="end_date">End Date</label>
                    <input type="date" name="end_date" class="form-control @error('end_date') is-invalid @enderror" id="end_date" value="{{ old('end_date') }}">
                    @error('end_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="file_type">File Type</label>
                    <select name="file_type" class="form-control @error('file_type') is-invalid @enderror" id="file_type">
                        <option disabled selected>-SELECT-</option>
                        <option value="0" {{ old('file_type') == 0 ? 'selected' : ''}}>PDF</option>
                        <option value="1" {{ old('file_type') == 1 ? 'selected' : ''}}>Excel</option>
{{--                        <option value="2" {{ old('file_type') === '2' ? 'selected' : ''}}>CSV</option>--}}
                    </select>
                    @error('file_type')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>
                <button class="btn btn-primary float-right" type="submit">Generate Report</button>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function show_report_column_list(){
            const report_type = $('#report_type').val();

            $.ajax({
                url: "{{ route('reports.get_report_column_list') }}",
                type:"POST",
                data:{
                    report_type:report_type,
                },
                success:function(response){
                    console.log(response);
                    let onclick;
                    let mandatory;
                    const report_column_listing = $("#report-column-listing");

                    report_column_listing.empty();
                    if (response) {
                        const p = response;

                        for (let i = 0; i < p.length; i++) {

                            console.log(p[i]);

                            if (p[i] == 'Branch' || p[i] == 'SKUID' || p[i] == 'Description' || p[i] == 'Date' || p[i] == 'Payment Method') {
                                onclick = 'onclick="return false"';
                                mandatory = '<span style="color: red; font-weight: bold">*</span>'
                            } else {
                                onclick = '';
                                mandatory = '';
                            }

                            report_column_listing.append(`
                                <li class="data-element">
                                    <div class="row">
                                        <div class="col-8">
                                            <span style="margin: 10px;">` + p[i] + `</span> `+mandatory+`
                                        </div>
                                        <div class="col-4" style="text-align: right">
                                            <input type="checkbox" name="report_column_list[]" id="report_column_list" class="data-checkbox" value="` + p[i] + `" checked `+onclick+`>
                                        </div>
                                    </div>
                                </li>`);
                        }
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

    </script>
@endsection