@canany(['hr_manager_hq', 'public_holidays'])

    @extends('adminlte::page')

    @section('title', $title)

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>{{ $subtitle }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item active">Public Holidays</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif
                    <div class="row mb2">
                        <div class="col-6">
                            <a href="{{ route('admin.public_holidays.create') }}" class="btn btn-success"><i
                                    class="fa fa-plus"></i> Add public holiday</a>
                        </div>
                    </div>
                    <div class="row p-4">
                        <div class="col-2">
                            <label id="countrylab" class="w-100">Type in country
                                <input type="text" id="country" list="countryList" class="form-control" name="country"
                                    placeholder="Type in for your country" value="{{ old('country') }}">
                                <datalist id="countryList">
                                    @foreach ($countries as $country)
                                        <option value="{{ $country->code }}">{{ $country->country }}</option>
                                    @endforeach
                                </datalist>
                            </label>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="pholList" class="table table-striped table-hover w-100">
                            <thead>
                                <tr>
                                    <th>
                                        #
                                    </th>
                                    <th>
                                        Description
                                    </th>
                                    <th>
                                        Date
                                    </th>
                                    <th>
                                        Day
                                    </th>
                                    <th>
                                        Country
                                    </th>
                                    <th>
                                        Actions
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($public_holidays as $holidays)
                                    <tr>
                                        <td>
                                            {{ $holidays->id }}
                                        </td>
                                        <td>
                                            {{ $holidays->description }}
                                        </td>
                                        <td>
                                            {{ date('d/m/Y', strtotime($holidays->date)) }}
                                        </td>
                                        <td>
                                            {{ $holidays->day }}
                                        </td>
                                        <td>
                                            <img src="https://flagcdn.com/w20/{{ strtolower($holidays->country) }}.png"
                                                srcset="https://flagcdn.com/w40/{{ strtolower($holidays->country) }}.png 2x"
                                                width="20" alt="{{ $holidays->country }}" class="mr-2">
                                            {{ $holidays->country }}
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <a href="{{ route('admin.public_holidays.edit', $holidays->id) }}"
                                                    class="btn btn-sm btn-outline-primary" data-toggle="tooltip"
                                                    data-placement="top" title="Edit"><i class="fa fa-pen"></i></a>
                                                <a href="" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                                                    data-target="#modal{{ $holidays->id }}"
                                                    id="delete-link-{{ $holidays->id }}" title="Delete"><i
                                                        class="fa fa-trash"></i></a>
                                            </div>
                                            <script>
                                                $('#delete-link-{{ $holidays->id }}').on('mouseover', function() {
                                                    $(this).tooltip('show');

                                                });
                                                $('#delete-link-{{ $holidays->id }}').on('mouseleave', function() {
                                                    $(this).tooltip('hide');
                                                });
                                            </script>
                                        </td>
                                    </tr>
                                    @if (!empty($holidays->id))
                                        <!-- Modal -->
                                        <div class="modal fade" id="modal{{ $holidays->id }}" tabindex="-1"
                                            aria-labelledby="moal_Delete" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-light">
                                                        <h5 class="modal-title" id="exampleModalLabel">Move:
                                                            {{ $holidays->description }} - {{ $holidays->date }} to the
                                                            recycle bin</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">

                                                        Are you sure you want to move <b> {{ $holidays->description }}
                                                            ({{ $holidays->country }}) -
                                                            {{ $holidays->date }}</b> to the recycle bin?

                                                    </div>
                                                    <div class="modal-footer bg-light">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal"><i class="fa fa-times mr-1"></i>No , Keep
                                                            it</button>
                                                        <form
                                                            action="{{ route('admin.public_holidays.destroy', $holidays->id) }}"
                                                            method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger m-l-2"><i
                                                                    class="fa fa-trash-alt mr-1"></i>Yes</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- end modal -->
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <script>
                        $(document).ready(function() {
                            const table = $('#pholList').DataTable({
                                order: [
                                    [4, 'asc'],
                                    [2, 'asc']
                                ],
                            });
                            const countryDropdown = $('#country');

                            countryDropdown.on('keyup change', function() {
                                event.preventDefault();
                                const selectedCountry = $(this).val();
                                table.column(4).search(selectedCountry).draw();
                            });

                            $(function() {
                                $('[data-toggle="tooltip"]').tooltip()
                            })
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@endcan