@extends('ctrl.app')

@section('head-script')
@endsection

@section('head-styles')
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-header">
                        <div class="row mb-2">
                            <div class="col-md-2 mb-2 font-weight-bold">pdfs</div>
                            <div class="col-md-1 pt-1" style="background-color: {{config('view.expired')}}">Expired</div>
                            <div class="col-md-2 pt-1" style="background-color: {{config('view.expiresInAWeek')}}">Expires within a week</div>
                            <div class="col-md-2 pt-1" style="background-color: {{config('view.expiresInAMonth')}}">Expires within a month</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="m-0 text-primary" for="company_id">Company</label>
                                <select id="company_id" name="company_id" form="form-search" class="custom-select mb-3" >
                                    <option value="">Please choose a company</option>
                                    @forelse($companies as $company)
                                        <option value="{{$company->fake_id}}" class="form-control"
                                                @if(\Illuminate\Support\Facades\Input::get('company_id') == $company->fake_id ) selected @endif>
                                            {{$company->title}}
                                        </option>
                                    @empty
                                        <option value="">There are no companies</option>
                                    @endforelse
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="m-0 text-primary" for="category_id">Category</label>
                                <select id="category_id" name="category_id" form="form-search" class="custom-select  mb-3" >
                                    <option value="" data-company="">Please choose a company first</option>
                                    @forelse($categories as $category)
                                        <option value="{{$category->fake_id}}" class="form-control"
                                                @if(\Illuminate\Support\Facades\Input::get('category_id') == $category->fake_id ) selected @endif
                                                data-company="{{$category->company->fake_id}}">
                                            {{$category->title}}
                                        </option>
                                    @empty
                                        <option value="">There are no categories</option>
                                    @endforelse
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="m-0 text-primary" for="sub_category_id">Sub Category</label>
                                <select id="sub_category_id" name="sub_category_id" form="form-search" class="custom-select" >
                                    <option value="" data-category="">Please choose a category first</option>
                                    @forelse($subCategories as $subCategory)
                                        <option value="{{$subCategory->fake_id}}" class="form-control"
                                                @if(\Illuminate\Support\Facades\Input::get('sub_category_id') == $subCategory->fake_id ) selected @endif
                                                data-category="{{$subCategory->category->fake_id}}">
                                            {{$subCategory->title}}
                                        </option>
                                    @empty
                                        <option value="">There are no sub-categories</option>
                                    @endforelse
                                </select>
                            </div>
                            <div class="col-md-3">
                                @can('delete', $modelClass)
                                    <button id="delete-all-sub" {{Request::get('sub_category_id') ? '' : 'disabled'}} class="btn btn-sm btn-danger ml-2" style="margin-top: 1.65rem"><i class="fas fa-trash"></i> Subcategory</button>
                                    <form id="delete-all-form" method="post" style="display: none" action="{{route('pdfs.delete-many')}}">
                                        @csrf
                                        <input type="hidden" name="sub" value="">
                                    </form>
                                @endcan

                                @can('de/activate', $modelClass)
                                    <button id="deactivate-all-sub" {{Request::get('sub_category_id') ? '' : 'disabled'}}  class="btn btn-sm btn-warning ml-2" style="margin-top: 1.65rem"><i class="fas fa-eye-slash"></i> Subcategory</button>
                                    <form id="deactivate-all-form" style="display: none" method="post" action="{{route('pdfs.deactivate-many')}}">
                                        @csrf
                                        <input type="hidden" name="sub" value="">
                                    </form>
                                @endcan
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-9 ">
                                <form id="form-search" method="get" action="{{route('pdfs.index')}}">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <select title="" name="t" id="search-type">
                                                <option value="title" @if(\Illuminate\Support\Facades\Input::get('t') == 'title') selected @endif>Title</option>
                                            </select>
                                        </div>
                                        <input title="" name="text" type="text" class="form-control" aria-label="Search Text" value="{{\Illuminate\Support\Facades\Input::get('text')}}">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" onclick="this.form.submit()">Search</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-3">
                                @can('add',$modelClass)
                                    <a class="btn btn-sm btn-primary ml-2 mt-1"  href="{{route('pdfs.create')}}">Create pdf</a>
                                    <a class="btn btn-sm btn-primary ml-2 mt-1"   href="{{route('pdfs.add-many')}}">Create many pdf</a>
                                @endcan
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-5">
                                @can('delete', $modelClass)
                                    <button id="delete-selected" class="btn btn-sm btn-danger ml-2" disabled style="margin-top: 1.65rem"><i class="fas fa-trash"></i> Delete Selected</button>
                                    <form id="delete-selected-form" style="display: none" method="post" action="{{route('pdfs.delete-selected')}}">@csrf</form>
                                @endcan

                                @can('de/activate', $modelClass)
                                    <button id="de-activate-selected" class="btn btn-sm btn-warning ml-2" disabled style="margin-top: 1.65rem"><i class="fas fa-eye-slash"></i>/<i class="fas fa-eye"></i> De/activate Selected</button>
                                    <form id="de-activate-selected-form" style="display: none" method="post" action="{{route('pdfs.de_activate-selected')}}">@csrf</form>
                                @endcan
                            </div>
                        </div>
                    </div>


                    <div class="card-body">
                        @include('ctrl.common.i_success_notification')

                        <table class="table table-striped table-responsive">
                            @if(!$pdfs->count())
                                @include('ctrl.common.i_empty_page',['items'=>$modelClass])
                            @else
                                <thead>
                                <tr>
                                    <th style="width: 1%" nowrap scope="col" class="text-center">#</th>
                                    <th class="text-center align-middle">
                                        <input type="checkbox" title="Select" class="checkbox-th"/>
                                    </th>
                                    <th nowrap scope="col" class="text-center">@sortablelink('title', 'Title')</th>
                                    <th nowrap scope="col" class="text-center">@sortablelink('company.title', 'Company')</th>
                                    <th nowrap scope="col" class="text-center">@sortablelink('category.title', 'Category')</th>
                                    <th nowrap scope="col" class="text-center">@sortablelink('subCategory.title', 'Sub Category')</th>
                                    <th nowrap scope="col" class="text-center">@sortablelink('created_at', 'Creation Time')</th>
                                    {{--any more heads below here--}}

                                    @canany(['edit','delete','de/activate'],$modelClass)
                                        <th scope="col" class="text-center">Actions</th>
                                    @endcanany
                                </tr>
                                </thead>
                            @endif

                            <tbody>
                            @foreach($pdfs as $pdf)
                                <tr id="row_{{$pdf->fake_id}}"  style="opacity: {{$pdf->trashed() ? config('view.deactivated-opacity') : 1}}; background-color: {{$pdf->color_status}}" >
                                    <th scope="row" class="text-center align-middle">@listing($pdfs)</th>
                                    <td nowrap class="text-center align-middle" style="width: 1%">
                                        <input type="checkbox" title="Select Row" data-name="{{$pdf->title}}" class="checkbox-td"/>
                                    </td>
                                    <td style="max-width: 300px; word-wrap: break-word;" class=" text-center align-middle">{{$pdf->title}}</td>
                                    <td class="text-center align-middle">{{$pdf->company->title}}</td>
                                    <td class="text-center align-middle">{{$pdf->category->title}}</td>
                                    <td class="text-center align-middle">{{$pdf->subCategory->title}}</td>
                                    <td class="text-center align-middle">{{$pdf->created_at->diffForHumans()}}</td>
                                    {{--any more below here--}}

                                    @canany(['edit', 'delete', 'de/activate'],$modelClass)
                                        <td nowrap style="width: 1%" class="text-center align-middle">
                                            <a class="btn btn-secondary" href="{{route('pdfs.show', [$pdf])}}"><i class="fas fa-download"></i></a>

                                            @include('ctrl.common.i_button_edit_activate_delete', [
                                              'item' => $pdf,
                                              'route' => route('pdfs.index'),
                                              'editRoute' => route('pdfs.edit',[$pdf])
                                          ])
                                        </td>
                                    @endcanany
                                </tr>
                            @endforeach
                            </tbody>
                        </table>


                        {{ $pdfs->appends($_GET)->links() }}

                    </div>

                </div>
            </div>
        </div>
    </div>

    @can('delete', $modelClass)
        @include('ctrl.common.modal_delete')
        <div class="modal fade" id="deleteAll" tabindex="-1" role="dialog" aria-labelledby="deleteAll" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteAll">Delete All <span class="da-title text-danger"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            You are about to <u><b>Delete</b></u> all certificates in sub-category "<span class="da-title text-danger"></span>"<br>
                            <i class="text-info">This action is irreversible</i><br><br>
                            <label><input id="delete-confirm" type="checkbox" class="align-middle"> Click here to confirm</label>
                        </div>
                    </div>
                    <div class="modal-footer" style="display: block !important;">
                        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-outline-danger float-right" id="delete-all" disabled>Delete</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deleteSelected" tabindex="-1" role="dialog" aria-labelledby="deleteSelected" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteAll">Delete Selected Certificates</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            You are about to <u><b>Delete (irreversible action)</b></u> the following certificates: <br><span class="da-certificates text-danger"></span>
                            <br>
                            <label><input id="delete-selected-confirm" type="checkbox" class="align-middle"> Click here to confirm</label>
                        </div>
                    </div>
                    <div class="modal-footer" style="display: block !important;">
                        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-outline-danger float-right" id="btn-delete-selected" disabled>Delete</button>
                    </div>
                </div>
            </div>
        </div>
    @endcan
    @can('de/activate', $modelClass)
        @include('ctrl.common.modal_activation')

        <div class="modal fade" id="deactivateAll" tabindex="-1" role="dialog" aria-labelledby="deactivateAll" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deactivateAll">Deactivate All <span class="da-title text-danger"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            You are about to <u><b>deactivate</b></u> all certificates in sub-category "<span class="da-title text-danger"></span>"
                            <br><br>
                            <label><input id="deactivate-confirm" type="checkbox" class="align-middle"> Click here to confirm</label>
                        </div>
                    </div>
                    <div class="modal-footer" style="display: block !important;">
                        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-outline-danger float-right" id="deactivate-all" disabled>Deactivate</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deactivateSelected" tabindex="-1" role="dialog" aria-labelledby="deactivateSelected" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deactivateAll">De/activate Selected Certificates</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            You are about to <u><b>de/activate</b></u> the following certificates: <br><span class="da-certificates text-danger"></span>
                            <br>
                            <label><input id="de-activate-selected-confirm" type="checkbox" class="align-middle"> Click here to confirm</label>
                        </div>
                    </div>
                    <div class="modal-footer" style="display: block !important;">
                        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-outline-danger float-right" id="btn-de-activate-selected" disabled>De/activate</button>
                    </div>
                </div>
            </div>
        </div>
    @endcan
@endsection

@section('footer-script')
    @canany(['delete', 'de/activate'], $modelClass)
        <script src="{{asset('js/delete-deactivate.js')}}"></script>
    @endcanany

    <script>
        $('#company_id').on('change', function () {
            let selected = $(this).val();
            $("#category_id option").each(function () {
                let element = $(this);
                if(selected === element.data("company") || element.data("company") === ''){
                    element.removeClass('hidden')
                        .addClass('visible')
                        .show();
                } else {
                    if(element.is(':selected')){
                        element.prop('selected', false);
                        $("#category_id").triggerHandler('change');
                    }
                    element.removeClass('visible')
                        .addClass('hidden')
                        .hide();
                }
            });
        }).triggerHandler('change');
        $('#category_id').on('change', function () {
            let selected = $(this).val();
            $("#sub_category_id option").each(function () {
                let element = $(this);
                if(selected === element.data("category") || element.data("category") === ''){
                    element.removeClass('hidden')
                        .addClass('visible')
                        .show();
                } else {
                    if(element.is(':selected')){
                        element.prop('selected', false);
                        $('#sub_category_id').triggerHandler('change');
                    }
                    element.removeClass('visible')
                        .addClass('hidden')
                        .hide();
                }
            });
        }).triggerHandler('change');

        $('#sub_category_id').on('change', function(){
            if($("#sub_category_id option:selected").val() !== ''){
                $('#delete-all-sub').prop('disabled', false);
                $('#deactivate-all-sub').prop('disabled', false);
            } else {
                $('#delete-all-sub').prop('disabled', true);
                $('#deactivate-all-sub').prop('disabled', true);
            }
        });

        @can('delete', $modelClass)
        $('#delete-all-sub').on('click', function(){
            let title =  $('#sub_category_id option:selected').text();
            $('#delete-confirm').prop('checked', false);
            $('#delete-all').prop('disabled', true);
            let modal = $('#deleteAll');
            modal.find('.da-title').html(title);
            modal.modal('show');
        });
        $('#delete-confirm').on('change', function(){
            if($(this).is(':checked')){
                $('#delete-all').prop('disabled', false);
            } else{
                $('#delete-all').prop('disabled', true);
            }
        });
        $('#delete-all').on('click', function(){
            let form = $('#delete-all-form');
            form.find('input[name=sub]').val($('#sub_category_id').val());
            form.submit();
        });

        $('#delete-selected').on('click', function(){
            $('#delete-selected-confirm').prop('checked', false);
            $('#btn-delete-selected').prop('disabled', true);
            let modal = $('#deleteSelected');
            modal.find('.da-certificates').html(checkedRecordNames().join('<br>'));
            modal.modal('show');
        });
        $('#delete-selected-confirm').on('change', function(){
            if($(this).is(':checked')){
                $('#btn-delete-selected').prop('disabled', false);
            } else{
                $('#btn-delete-selected').prop('disabled', true   );
            }
        });
        $('#btn-delete-selected').on('click', function(){
            let form = $('#delete-selected-form');
            form.append($('<input type="hidden">').attr({name: 'ids', value: checkedRecordIds()}));
            form.submit();
        });
        @endcan
        @can('de/activate', $modelClass)
        $('#deactivate-all-sub').on('click', function(){
            let title =  $('#sub_category_id option:selected').text();
            $('#deactivate-confirm').prop('checked', false);
            $('#deactivate-all').prop('disabled', true);
            let modal = $('#deactivateAll');
            modal.find('.da-title').html(title);
            modal.modal('show');

        });
        $('#deactivate-confirm').on('change', function(){
            if($(this).is(':checked')){
                $('#deactivate-all').prop('disabled', false);
            } else{
                $('#deactivate-all').prop('disabled', true   );
            }
        });
        $('#deactivate-all').on('click', function(){
            let form = $('#deactivate-all-form');
            form.find('input[name=sub]').val($('#sub_category_id').val());
            form.submit();
        });

        $('#de-activate-selected').on('click', function(){
            $('#de-activate-selected-confirm').prop('checked', false);
            $('#btn-de-activate-selected').prop('disabled', true);
            let modal = $('#deactivateSelected');
            modal.find('.da-certificates').html(checkedRecordNames().join('<br>'));
            modal.modal('show');
        });
        $('#de-activate-selected-confirm').on('change', function(){
            if($(this).is(':checked')){
                $('#btn-de-activate-selected').prop('disabled', false);
            } else{
                $('#btn-de-activate-selected').prop('disabled', true   );
            }
        });
        $('#btn-de-activate-selected').on('click', function(){
            let form = $('#de-activate-selected-form');
            form.append($('<input type="hidden">').attr({name: 'ids', value: checkedRecordIds()}));
            form.submit();
        });
            @endcan


        let recordCount = () => $('tr[id^="row_"]').length;
        let checkedRecordCount = () => $('.checkbox-td:checked').length;
        let checkedRecordIds = () => {
            let ids = [];
            $('.checkbox-td:checked').each((i, el) => {
                ids.push($(el).closest('tr').prop('id').split('row_')[1]);
            });
            return ids;
        };
        let checkedRecordNames = () => {
            let names = [];
            $('.checkbox-td:checked').each((i, el) => {
                names.push($(el).data('name'));
            });
            return names;
        };
        $(document).on('change', '.checkbox-td', () => {
            if (checkedRecordCount() < recordCount() && checkedRecordCount() > 0) {
                $('input[type=checkbox].checkbox-th').prop("indeterminate", true);
                $('#delete-selected, #de-activate-selected').prop('disabled', false);
            } else if (checkedRecordCount() === recordCount()) {
                $('input[type=checkbox].checkbox-th').prop("indeterminate", false).prop("checked", true);
                $('#delete-selected, #de-activate-selected').prop('disabled', false);
            } else {
                $('input[type=checkbox].checkbox-th').prop("indeterminate", false).prop("checked", false);
                $('#delete-selected, #de-activate-selected').prop('disabled', true);
            }
        });
        $(document).on('change', 'input[type=checkbox].checkbox-th', (e) => {
            if (checkedRecordCount() === recordCount()) {
                $('.checkbox-td').each((i, el) => $(el).prop("checked", false));
                $(e.target).prop("checked", false);
                $('#delete-selected, #de-activate-selected').prop('disabled', true);
            } else {
                $('.checkbox-td').each((i, el) => $(el).prop("checked", true));
                $(e.target).prop("checked", true);
                $('#delete-selected, #de-activate-selected').prop('disabled', false);
            }
        });

    </script>
@endsection