@extends('layouts.master')
@section('title', 'Site Detail Report')

@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
@include('partials.header')
@include('partials.sidebar')

<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-map-marker"></i> Site Report</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">Reports</li>
            <li class="breadcrumb-item active">Site Report</li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <h3 class="tile-title">Site Filter</h3>
                <div class="tile-body">
                    <form method="POST" action="{{ route('site-report.generate') }}">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label for="fromDate">From Date</label>
                                <input type="date" name="fromDate" class="form-control" value="{{ old('fromDate', date('Y-m-01')) }}" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="toDate">To Date</label>
                                <input type="date" name="toDate" class="form-control" value="{{ old('toDate', date('Y-m-d')) }}" required>
                            </div>
                            <div class="form-group col-md-5">
                                <label for="site">Site Name</label>
                                <select name="site" id="site" class="form-control select2" required>
                                    <option value="">-- Select Site --</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->name }}" {{ old('site') == $customer->name ? 'selected' : '' }}>
                                            {{ strtoupper($customer->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-1">
                                <label>&nbsp;</label>
                                <button type="submit" class="btn btn-primary form-control">Generate</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

@push('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('.select2').select2({ width: '100%' });
    });
</script>
@endpush
@endsection