@extends('layouts.admin')
@section('content')
<div class="card">
    <div class="card-header">
        Merchandise Reports
    </div>

    <div class="card-body">
        <div class="form-group">
            <form>
                <div class="form-row d-flex align-items-center">
                    <div class="col-12 col-md-2">
                        <label class="required" for="date_from">Date From</label>
                        <input class="form-control date {{ $errors->has('date_from') ? 'is-invalid' : '' }}" type="text" name="date_from" id="date_from" value="{{ old('date_from', request()->input('date_from')) }}" required>
                        @if($errors->has('date_from'))
                            <div class="invalid-feedback">
                                {{ $errors->first('date_from') }}
                            </div>
                        @endif
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="required" for="date_to">Date To</label>
                        <input class="form-control date {{ $errors->has('date_to') ? 'is-invalid' : '' }}" type="text" name="date_to" id="date_to" value="{{ old('date_to', request()->input('date_to')) }}" required>
                        @if($errors->has('date_to'))
                            <div class="invalid-feedback">
                                {{ $errors->first('date_to') }}
                            </div>
                        @endif
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="required" for="employee">Merchandiser Name</label>
                        <select class="form-control" name="employee" id="employee">
                            <option value="0" hidden>Select an employee</option>
                            @foreach($employees as $id => $employee_name)
                                <option value="{{ $id }}" {{ request()->input('employee') == $id ? 'selected' : '' }}>{{ $employee_name }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('employee'))
                            <div class="invalid-feedback">
                                {{ $errors->first('employee') }}
                            </div>
                        @endif
                    </div>
                    <div class="col-12 col-md-2">
                        <button class="btn btn-success d-inline-block" type="submit">Filter</button>
                    </div>
                </div>
            </form>
        </div>
        @if ($reportData)
            <div class="form-group">
                <table class="table table-sm table-bordered">
                    <tbody>
                        @foreach ($reportData as $mainKey => $mainData)
                            <tr>
                                <th>No.</th>
                                <th>Merchandiser Name</th>
                                <th>Date Visited</th>
                                <th>Number of merchant visited</th>
                            </tr>
                            <tr>
                                <td>{{ $mainKey + 1 }}</td>
                                <td>{{ $mainData['employee_name'] }}</td>
                                <td>{{ $mainData['date'] }}</td>
                                <td>{{ $mainData['number_merchants'] }}</td>
                            </tr>
                            <tr>
                                <td colspan="4"></td>
                            </tr>
                            @foreach($mainData['availableStores'] as $subKey => $availableStore)
                                <tr>
                                    <td></td>
                                    <td>{{ $availableStore['store_name'] }}</td>
                                    <td class="p-0">
                                        <table class="table table-bordered table-striped m-0">
                                            <thead>
                                                <th style="width: 10%;">#</th>
                                                <th style="width: 80%;">Product Name</th>
                                                <th style="width: 10%;">Quantity</th>
                                            </thead>
                                            <tbody>
                                                @foreach ($availableStore['products'] as $key => $product)
                                                    <tr>
                                                        <td>{{ $key + 1 }}</td>
                                                        <td>{{ $product['product_name'] }}</td>
                                                        <td>{{ $product['quantity'] }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </td>
                                    <td>{{ $availableStore['additional_comment'] }}</td>
                                </tr>
                            @endforeach
                            @if(!$loop->last)
                            <tr><td colspan="4"></td></tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="form-group">
                <a class="btn btn-success" href="{{ route('admin.merchandise-reports.export', ['date_from' => request()->input('date_from'), 'date_to' => request()->input('date_to'), 'employee' => request()->input('employee')]) }}">Export</a>
                <a class="btn btn-info" href="{{ route('admin.merchandise-reports.print', ['date_from' => request()->input('date_from'), 'date_to' => request()->input('date_to'), 'employee' => request()->input('employee')]) }}">Print</a>
            </div>
        @else
            <p class="text-center">There is no any data currently.</p>
        @endif
    </div>
</div>
@endsection

@section('scripts')
@parent
{{-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
@endsection