@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:;">Advertising</a></li>
            <li class="active"><a href="javascript:;">Advertising Lists</a></li>
        </ol>
    </div>
    <div class="page-heading page-heading-md">
        <h2>All Advertising 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 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_approval_status">Record Approval Status</label>
                                <div class="col-sm-3">
                                    <select name="record_approval_status" id="record_approval_status" class="form-control">
                                        <option value="">All</option>
                                        <option value="Approved" {{ request('record_approval_status') == 'Approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="Submitted" {{ request('record_approval_status') == 'Submitted' ? 'selected' : '' }}>Submitted</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="name">Name</label>
                                <div class="col-sm-3">
                                    <input type="text" name="name" id="name" value="{{ old('name', request('name')) }}" class="form-control">
                                </div>

                                <label class="col-sm-2 col-form-label" for="iata_code">IATA/ISO Code</label>
                                <div class="col-sm-3">
                                    <input type="text" name="iata_code" id="iata_code" value="{{ old('iata_code', request('iata_code')) }}" class="form-control">
                                </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('advertising.entity-submit') }}" name="advertising_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>Record Type</th>
                                    <th>Name</th>
                                    <th>Advertising Group Name</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <!-- <th>Entity Status</th> -->
                                    <!-- <th></th> -->
                                </tr>
                            </thead>
                            <tbody id="table-data">
                                @include('admin.advertising.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">
                                <input type="submit" name="send_back" value="Draft" onclick="return confirm('Are you sure you want to send back all selected!');" id="ContentPlaceHolder1_Button2" class="btn btn-primary 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('advertising.filter-advertice-approval-lists') }}?page=" + page,
            method: "POST",
            data: $('form').serialize(),
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            success: function(res) {
                $('#table-data').html(res.html);
                $('#pagination-links').html(res.pagination);
            }
        });
    }

    // On filter submit
    $(document).on("click",".page-link",function(){
            $('form').on('submit', function(e){
                e.preventDefault();
                fetchData();
            });
    });
    $(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
    });

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

    // Select/Deselect all
    checkAllBox.on('change', function() {
        $('input[name="cms_draft_record_id[]"]').prop('checked', this.checked);
    });

    // Delegate to dynamically loaded checkboxes
    $(document).on('change', 'input[name="cms_draft_record_id[]"]', function() {
        const itemCheckboxes = $('input[name="cms_draft_record_id[]"]');
        const allChecked = itemCheckboxes.length === itemCheckboxes.filter(':checked').length;
        checkAllBox.prop('checked', allChecked);
    });
    
});
</script>
@endpush