@extends('admin.layouts.app')
@section('content')
<div class="page-content">
    <div class="page-subheading page-subheading-md">
        <ol class="breadcrumb">
            <li><a href="javascript:;">Dashboard</a></li>
            <li class="active"><a href="javascript:;">Pending Lists</a></li>
            <li class="active"><a href="javascript:;">Pending Lists Approval Lists</a></li>
        </ol>
    </div>
    <div class="page-heading page-heading-md">
        <h2>All Pending Lists Approval Lists</h2>
    </div>
    <div class="container-fluid-md">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-error">
                {{ session('error') }}
            </div>
        @endif
        <div class="row">
            <div class="col-md-12">
                <form id="searchForm" class="form-horizontal" action="javascript:void(0)" method="POST">
                    @csrf
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">Search</h4>
                        </div>

                        <div class="panel-body">

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="keyword">Keyword</label>
                                <div class="col-sm-3">
                                    <input type="text" name="keyword" id="keyword" value="{{ old('keyword', request('keyword')) }}" class="form-control">
                                </div>
                                <label class="col-sm-2 col-form-label" for="record_type">Record Type</label>
                                <div class="col-sm-3">
                                    <select name="list_type" id="list_type" class="form-control">
                                        <option value="">All</option>
                                        <option value="countries" {{ request('entity_type') == 'countries' ? 'selected' : '' }}>Countries</option>
                                        <option value="cities" {{ request('entity_type') == 'cities' ? 'selected' : '' }}>Cities</option>
                                        <option value="airports" {{ request('entity_type') == 'airports' ? 'selected' : '' }}>Airports</option>
                                        <option value="airlines" {{ request('entity_type') == 'airlines' ? 'selected' : '' }}>Airlines</option>
                                        <option value="articles" {{ request('entity_type') == 'articles' ? 'selected' : '' }}>Articles</option>
                                        <option value="videos" {{ request('entity_type') == 'videos' ? 'selected' : '' }}>Videos</option>
                                    </select>
                                </div>
                                
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="from_date">From Date</label>
                                <div class="col-sm-3">
                                    <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}" class="form-control">
                                </div>

                                <label class="col-sm-2 col-form-label" for="to_date">To Date</label>
                                <div class="col-sm-3">
                                    <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}" class="form-control">
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-sm-12 text-center">
                                    <div id="ContentPlaceHolder1_ValidationSummary1" style="display: none;"></div>
                                    <input type="submit" name="submit" value="Search" id="ContentPlaceHolder1_btnFind" class="btn btn-primary page-link">
                                </div>
                            </div>

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

            </div>
        </div>
        <div class="panel panel-default">
            <form action="{{ route('cms.pending-lists-approval-submit') }}" name="advertising_entity_approval" enctype="multipart/form-data" method="POST">
                @csrf
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped" style="background-color: white;">
                            <thead>
                                <tr>
                                    <th>
                                        <input id="check_all" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox2">
                                    </th>
                                    <th>Entity Type</th>
                                    <th>Entity List</th>
                                    <th>Name</th>
                                    <th>Display Location</th>
                                    <th>Display Importance</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <!-- <th>Action</th> -->
                                    
                                </tr>
                            </thead>
                            <tbody id="table-data">
                                @include('admin.common.all-lists.all-pending-lists-approval-table-part', ['entities' => $entities])
                            </tbody>
                        </table>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <textarea name="review_remark" rows="2" cols="20" placeholder="Remarks ..." style="width:100%;"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12" style="text-align: center;">
                                <input type="hidden" name="status" value="">
                                <input type="submit" name="aprrove" value="Approved" onclick="return confirm('Are you sure you want to approve all selected!');" id="ContentPlaceHolder1_btnadd" class="btn btn-success formSubmit">
                                <input type="submit" name="reject" value="Reject" onclick="return confirm('Are you sure you want to reject all selected!');" id="ContentPlaceHolder1_Button1" class="btn btn-danger formSubmit">
                            </div>
                        </div>
                        <div id="pagination-links">
                            {{ (!empty($entities))? $entities->links():"" }}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function(){

    function fetchData(page = 1) {
        $.ajax({
            url: "{{ route('cms.filter-pending-lists-approval') }}?page=" + page,
            method: "POST",
            data: $('#searchForm').serialize(),
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            success: function(res) {
                $('#table-data').html(res.html);
                $('#pagination-links').html(res.pagination);
            }
        });
    }

    // Bind form submit once
    $(document).on('submit', '#searchForm', function(e){
        e.preventDefault();
        fetchData();
    });

    // On pagination click
    $(document).on('click', '#pagination-links a', function(e){
        e.preventDefault();
        let page = $(this).attr('href').split('page=')[1];
        fetchData(page);
    });

    // Approve / Reject buttons
    $(document).on("click", ".formSubmit", function (e) {
        var val = $(this).val();
        $('input[name="status"]').val(val);
        e.preventDefault();
        $(this).closest("form")[0].submit(); // submit actual approval form
    });

    // Check all
    const checkAllBox = $('#check_all');
    checkAllBox.on('change', function() {
        $('input[name="cms_draft_entity_record_id[]"]').prop('checked', this.checked);
    });

    $(document).on('change', 'input[name="cms_draft_entity_record_id[]"]', function() {
        const itemCheckboxes = $('input[name="cms_draft_entity_record_id[]"]');
        const allChecked = itemCheckboxes.length === itemCheckboxes.filter(':checked').length;
        checkAllBox.prop('checked', allChecked);
    });
});

</script>
@endpush