@extends('layouts.admin')
@push('styles')
    <link href="{{ asset('assets/build/css/virtual-select.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/build/css/tooltip.min.css') }}" rel="stylesheet">
@endpush

@push('script')
    <script src="{{ asset('assets/build/js/virtual-select.min.js') }}"></script>
    <script src="{{ asset('assets/build/js/tooltip.min.js') }}"></script>
@endpush
@section('content')
    <style>
        .vscomp-ele {
            max-width: 100% !important;
        }
    </style>
    <div class="h-100">
        <div class="page-title">
            <div class="title_left">
                <h3>Rapoarte Ghișee
                    <small>
                        {{ $location_id ? 'Locație: ' . $locations->find($location_id)->mnemonic : '' }}
                    </small>
                </h3>
            </div>

            <div class="title_right">
            </div>
        </div>

        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12  ">
                <div class="x_panel d-flex flex-column justify-content-start" style="min-height: 75vh;">
                    <div class="x_title">
                        <div class="">
                            <div class="container">
                                <form action="{{ route('reports.counters') }}" method="GET" class="container d-flex align-items-end justify-content-between">
                                    <div class="flex-grow-1 row justify-content-end align-items-end pr-3">
                                        <div class="col-md-2">
                                            <label for="location-select">Locație</label>
                                            <div>
                                                <select data-search="true" id="location-select" class="text-black" name="location_id">
                                                    <option value="">Alegeți o locație</option>
                                                    @foreach ($locations as $location)
                                                        <option value="{{ $location->id }}" @selected($location->id == $location_id)>{{ $location->mnemonic }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="status">Status</label>
                                            <div>
                                                <select data-search="true" id="status" class="text-black" name="status">
                                                    <option value="">Alegeți un status</option>
                                                    @foreach ($ticketStatuses as $_status => $status_text)
                                                        <option value="{{ $_status }}" @selected($_status == $status)>{{ $status_text }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="opeation_id">Operațiune</label>
                                            <div>
                                                <select data-search="true" id="operation_id" class="text-black" name="operation_id">
                                                    <option value="">Alegeți o operațiune</option>
                                                    @foreach ($operations as $operation)
                                                        <option value="{{ $operation->id }}" @selected($operation->id == $operation_id)>{{ $operation?->lang['ro'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <label for="counter_id">Ghișeu</label>
                                            <div>
                                                <select data-search="true" id="counter_id" class="text-black" name="counter_id">
                                                    <option value="">Alegeți un ghișeu</option>
                                                    @foreach ($counters as $counter)
                                                        <option value="{{ $counter->id }}" @selected($counter->id == $counter_id)>{{ $counter->counter_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="fro_date">Data de început</label>
                                            <input type="date" class="form-control" name="from_date" value="{{ $from_date }}" />
                                        </div>
                                        <div class="col-md-2">
                                            <label for="to_ate">Data de sfârșit</label>
                                            <input type="date" class="form-control" name="to_date" value="{{ $to_date }}" />
                                        </div>
                                    </div>
                                    <div class="flex-shrink-1 d-flex align-items-end justify-content-end">
                                        <button type="sbmit" class="btn btn-primary m-0">Filtrează</button>
                                        <button type="button" class="btn btn-secondary m-0 ml-3" name="export" value="excel" onclick="window.location.href='{{ route('reports.counters', ['location_id' => $location_id, 'status' => $status, 'operation_id' => $operation_id, 'counter_id' => $counter_id, 'from_date' => $from_date, 'to_date' => $to_date, 'export' => 'excel']) }}'">
                                            Export
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="x_content flex-grow-1 position-relative" style="max-height:85%; overflow:auto;">
                        <div class="p-3 border-bottom bg-info text-white">
                            <h6 class="font-weight-bold font-underline">
                                Număr total de bonuri
                                <span class="text-black-50">
                                    {{ $from_date ? ' (' . $from_date . ' - ' . $to_date . ')' : '' }}
                                </span>:
                                <span class="text-warning">{{ $aggregatedData['total_tickets'] }}</span>
                            </h6>
                            <div class="d-flex">
                                @if(isset($aggregatedData['total_tickets']) && count($aggregatedData['total_by_status']) > 0)
                                    @foreach($ticketStatuses as $status => $status_text)
                                        @php
                                            $count = $aggregatedData['total_by_status'][$status] ?? 0;
                                        @endphp
                                        <h4 @class(['flex-fill px-4 d-flex justify-content-between align-items-center border-right', 'text-black-50' => !$count, 'font-weight-bold' => $count])>
                                            {{ $status_text }}
                                            <span>
                                                &#8594;
                                            </span>
                                            <span>{{ $count }}</span>
                                        </h4>
                                    @endforeach
                                @else
                                    <li class="list-group-item">Nu există date disponibile</li>
                                @endif
                            </div>
                        </div>

                        @if(isset($counters) && $counters->count() > 0)
                            <table class="table table-bordered table-striped">
                                <thead class="table-info sticky-top" style="text-align: left; z-index: 1;">
                                    <tr>
                                        <th>Ghișeu</th>

                                        <th>Detalii</th>
                                    </tr>
                                </thead>
                                <tbody style="text-align: left;">
                                    @foreach($countersData as $counter)
                                        @php
                                            $counter = (object) $counter;
                                            // dd($counter);
                                        @endphp
                                        <tr class="counter-row">
                                            <td>
                                                <strong>
                                                    <a href="{{ route('reports.tickets', ['from_date' => $from_date, 'to_date' => $to_date, 'counter_id' => $counter->counter_id, 'location_id' => $location_id]) }}">
                                                        <u>
                                                            {{ $counter->counter_name }}
                                                        </u>
                                                    </a>
                                                </strong>
                                            </td>
                                            @if ($counter->operations && count($counter->operations) > 0)
                                                <td colspan="4">
                                                    <ul class="list-group list-group-flush">
                                                        @foreach($counter->operations as $operation)
                                                            <li class="ticket-status-breakdown py-1 list-group-item" style="background: transparent">
                                                                <h6>Statusuri tichete: <span class="font-weight-bold">({{ $operation['total_tickets'] }})</span> - <a href="{{ route('reports.tickets', ['from_date' => $from_date, 'to_date' => $to_date, 'counter_id' => $counter->counter_id, 'operation_id' => $operation['id'], 'location_id' => $location_id]) }}" class="text-info">{{ $operation['name']['ro'] ?? 'N/A' }}</a></h6>
                                                                <div class="d-flex">
                                                                    @if(isset($operation['tickets']) && count($operation['tickets']) > 0)
                                                                        @foreach($ticketStatuses as $status => $status_text)
                                                                            @php
                                                                                $count = $operation['tickets'][$status] ?? 0;
                                                                            @endphp
                                                                            <div @class(['flex-fill px-4 d-flex justify-content-between align-items-center border-right', 'text-muted' => !$count, 'font-weight-bold' => $count])>
                                                                                {{ $status_text }}
                                                                                <span>
                                                                                    &#8594;
                                                                                </span>
                                                                                <span>{{ $count }}</span>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <li class="list-group-item">Nu există date disponibile</li>
                                                                    @endif
                                                                </div>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </td>
                                            @else
                                                <td colspan="4">
                                                    <div class="font-italic">
                                                        Nu există date disponibile pentru acest ghișeu.
                                                    </div>
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <div class="alert alert-info">
                                Nu există ghișee disponibile pentru filtrele selectate.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            VirtualSelect.init({ ele: 'select' });
        });
    </script>
@endsection