@extends('layouts.app')

@push('css')
<link href="{{ asset('assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="page-header mb-0">Sites Management</h1>
    <a href="{{ route('sites.create') }}" class="btn btn-primary"><i class="fa fa-plus fa-fw"></i> New Site</a>
</div>
<div class="panel panel-inverse border-0">
    <div class="panel-heading">List of sites</div>
    <div class="panel-body">
        <form action="{{ route('sites.index') }}" method="GET" class="row g-3 align-items-center mb-3">
            <div class="col-md-3 col-lg-2">
                <label class="visually-hidden" for="search_by">Site ID</label>
                <input type="text" class="form-control" id="site_id" name="site_id" value="{{ request()->get('site_id') }}" placeholder="Site ID">
            </div>
            <div class="col-md-3 col-lg-2">
                <label class="visually-hidden" for="site_name">Site Name</label>
                <input type="text" class="form-control" id="site_name" name="site_name" value="{{ request()->get('site_name') }}" placeholder="Site Name">
            </div>
            <div class="col-md-3 col-lg-2">
                <select name="region" id="region" class="form-select" placeholder="Region">
                    <option value="">Region</option>
                    @foreach ($regions as $region)
                        <option value="{{ $region->id }}" @selected(request()->get('region') == $region->id)>{{ $region->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 col-lg-2">
                <select name="status" id="status" class="form-select" placeholder="Status">
                    <option value="" @selected(request()->get('status') == '')>All</option>
                    @foreach(\App\Models\Traits\Enum\SiteStatus::cases() as $status)
                        <option value="{{ $status->value }}" @selected(request()->get('status') == $status->value && request()->get('status') != '')>
                            {{ $status->label() }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 col-lg-2">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('sites.index') }}" class="btn btn-white">Reset</a>
                <button type="submit" name="action" value="export" class="btn btn-green">Export</button>
            </div>
        </form>
        <div class="table-responsive">
            <table id="data-tsable-default" class="table table-hover border text-nowrap align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th width="1%" data-orderable="false">#</th>
                        <th>Name</th>
                        <th>Side Id</th>
                        <th>Region</th>
                        <th>Latitude</th>
                        <th>Longtitude</th>
                        <th class="text-end">Card Active</th>
                        <th class="text-end">Card Suspended</th>
                        <th class="text-end">Card Terminated</th>
                        <th>API Status</th>
                        <th>Status</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    @forelse ($sites as $index => $site)
                        <tr>
                            <td>{{ $sites->firstItem() + $index }}</td>
                            <td>{{ $site->name ?? '-' }}</td>
                            <td>{{ $site->site_id ?? '-' }}</td>
                            <td>{{ $site->region?->name ?? '-' }}</td>
                            <td>{{ $site->latitude ?? '-' }}</td>
                            <td>{{ $site->longitude ?? '-' }}</td>
                            <td class="text-end">
                                <a href="{{ route('season.index', ['site' => $site->site_id, 'status' => \App\Models\Traits\Enum\SeasonCardStatus::ACTIVE]) }}" class="fs-6">
                                    {{ $site->active_season_cards_count ?? '0' }}
                                </a>
                            </td>
                            <td class="text-end">
                                <a href="{{ route('season.index', ['site' => $site->site_id, 'status' => \App\Models\Traits\Enum\SeasonCardStatus::SUSPENDED]) }}" class="fs-6">
                                    {{ $site->suspended_season_cards_count ?? '0' }}
                                </a>
                            </td>
                            <td class="text-end">
                                <a href="{{ route('season.index', ['site' => $site->site_id, 'status' => \App\Models\Traits\Enum\SeasonCardStatus::TERMINATED]) }}" class="fs-6">
                                    {{ $site->terminated_season_cards_count ?? '0' }}
                                </a>
                            </td>
                            <td>
                                <span @class([
                                        'badge',
                                        'bg-green' => $site?->isApiEnable(),
                                        'bg-warning' => $site?->isApiDisabled(),
                                        'bg-purple' => $site?->isApiSchedule()
                                    ])>
                                    @if($site->api_enable_at)
                                        <time datetime="{{ $site->api_enable_at }}" data-bs-toggle="tooltip" title="Enable at {{ $site->api_enable_at }}">{{ $site->isApiEnable() ? 'Active' : 'Schdule' }}</time>
                                    @else
                                        Disable
                                    @endif
                                </span>
                            </td>
                            <td>
                                <span class="badge bg-{{ $site->status->color() }}">
                                    {{ $site->status->label() }}
                                </span>
                            </td>
                            <td class="text-end">
                                <form id="deleteForm" action="{{ route('sites.destroy', $site->id) }}" method="POST">
                                    @method('DELETE')
                                    @csrf
                                    <a href="{{ route('sites.edit', $site->id) }}" class="btn btn-sm btn-white me-1"><i class="fa-solid fa-pen-to-square fa-fw"></i></a>
                                    <button type="submit" id="delete" value="Delete Site" data-bs-toggle="tooltip" title="Padam" class="btn btn-sm btn-dark"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-center" colspan="5">Tiada data dijumpai</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="panel-footer">
        {{  $sites->links() }}
    </div>
</div>
@endsection

@push('js')
    <script src="{{ asset('assets/plugins/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('#data-table-default').DataTable({
            responsive: false
        });

        $(document).on('click', '#delete', function (e) {
                e.preventDefault();
                var self = $(this);
                Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this record!",
                    icon: "warning",
                    confirmButtonColor: '#276baa',
                    showCancelButton: true,
                    dangerMode: true,
                })
                .then((result) => {
                    if (result.isConfirmed) {
                        self.parents("#deleteForm").submit();
                    }
                });
            });
    </script>
@endpush