@extends('layouts.app')

@section('content')
@php
    $userPermission = \Session::get('userPermission');
@endphp
<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Quarters</h3>
            <p>You have total <span class="record_count">0</span> quarters.</p>
        </div><!-- .nk-block-head-content -->
        <!-- <div class="nk-block-head-content">
            <div class="toggle-wrap nk-block-tools-toggle">
                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="more-options"><em class="icon ni ni-more-v"></em></a>
                <div class="toggle-expand-content" data-content="more-options">
                    <ul class="nk-block-tools g-3">
                        <li class="nk-block-tools-opt">
                            <a href="#" data-toggle="modal" title="Add New" data-target="#modalAddNewQuarter" class="btn btn-primary d-none d-md-inline-flex"><em class="icon ni ni-plus addQuarter"></em><span>Add New</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div> -->
    </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->

<div class="nk-block table-compact">
    <!--  Filter Tag List -->
    <div id="filter_tag_list" class="filter-tag-list"></div>
    <!-- -->
    <div class="nk-tb-list is-separate mb-3">
        <table class="broadcast-init nowrap nk-tb-list is-separate" data-auto-responsive="false">
            <thead>
                <tr class="nk-tb-item nk-tb-head">
                    <th class="nk-tb-col tb-col-mb"><span class="sub-text">Name</span></th>
                    <th class="nk-tb-col tb-col-mb"><span class="sub-text">Year</span></th>
                    <th class="nk-tb-col tb-col-md" width="15%" nowrap="true"><span class="sub-text">Created At</span></th>
                    <th class="nk-tb-col tb-col-md" width="15%" nowrap="true"><span class="sub-text">Updated At</span></th>
                    <!-- <th class="nk-tb-col nk-tb-col-tools text-right w-1" nowrap="true">
                        <span class="sub-text">Action</span>
                    </th> -->
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div><!-- .nk-block -->

<!-- START: Modal - Filter -->
<div class="modal fade zoom" tabindex="-1" id="modalFilterUser">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Filter</h5>
                <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross"></em>
                </a>
            </div>
            <form role="form" class="mb-0" method="get" action="#">
            @csrf
            <div class="modal-body modal-body-lg">
                <div class="gy-3">
                    <div class="row g-3 align-center">
                        <div class="col-lg-5">
                            <x-inputs.verticalFormLabel label="First Name" for="firstName" suggestion="Specify the first name of the user." />
                        </div>
                        <div class="col-lg-7">
                            <x-inputs.text value="" for="firstName" icon="user" placeholder="First name" name="firstname"/>
                        </div>
                    </div>
                    <div class="row g-3 align-center">
                        <div class="col-lg-5">
                            <x-inputs.verticalFormLabel label="Last Name" for="lastName" suggestion="Specify the last name of the user."  />
                        </div>
                        <div class="col-lg-7">
                            <x-inputs.text value="" for="lastName" icon="user" placeholder="Last name" name="lastname"/>
                        </div>
                    </div>
                    <div class="row g-3 align-center">
                        <div class="col-lg-5">
                            <x-inputs.verticalFormLabel label="Mobile Number" for="contact_number" suggestion="Specify the mobile number of the user."  />
                        </div>
                        <div class="col-lg-7">
                            <x-inputs.text value="" for="contact_number" icon="call" placeholder="Mobile Number" name="contact_number"
                            data-parsley-pattern="{{ \Config::get('constants.REGEX.VALIDATE_MOBILE_NUMBER_LENGTH') }}"
                            />
                        </div>
                    </div>
                    <div class="row g-3 align-center">
                        <div class="col-lg-5">
                            <x-inputs.verticalFormLabel label="Created at" for="createdAt" suggestion="Select the dates of created at." />
                        </div>
                        <div class="col-lg-7">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-control-wrap">
                                        <div class="form-icon form-icon-left">
                                            <em class="icon ni ni-calendar"></em>
                                        </div>
                                        <input type="text" class="form-control date-picker" placeholder="Form Date" data-date-format="yyyy-mm-dd" id="fromDate" name="fromDate">
                                    </div>
                                    <!-- <div class="form-note mt-0">Form Date</div> -->
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-control-wrap">
                                        <div class="form-icon form-icon-left">
                                            <em class="icon ni ni-calendar"></em>
                                        </div>
                                        <input type="text" class="form-control date-picker" placeholder="To Date" data-date-format="yyyy-mm-dd"  id="toDate" name="toDate">
                                    </div>
                                    <!-- <div class="form-note mt-0">To Date</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="userId" name="user_id" value="0">
            <div class="modal-footer bg-light">
                <div class="row">
                    <div class="col-lg-12 p-0 text-right">
                        <button class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Cancel</button>
                        <button class="btn btn-danger resetFilter" data-dismiss="modal" aria-label="Close">Clear Filter</button>
                        <button class="btn btn-primary submitBtn" type="button">Submit</button>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- END: Modal - Filter -->

<!-- START: Modal - Add New Quarter -->
<div class="modal fade zoom" tabindex="-1" id="modalAddNewQuarter">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title quarter-model-title">Add New Quarter</h5>
                <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross"></em>
                </a>
            </div>
            <form role="form" class="mb-0" method="get" action="{{url('quarter/store')}}">
            @csrf
            <div class="modal-body modal-body-lg">
                <div class="gy-3">
                    <div class="row g-3 align-center">
                        <div class="col-lg-5">
                            <x-inputs.verticalFormLabel label="Quarter Name" for="quarter_name" suggestion="Specify the quarter name." required="true"/>
                        </div>
                        <input type="hidden" id="quarter_id" name="quarter_id" value="0">
                        <div class="col-lg-7">
                            <x-inputs.text value="" for="quarter_name" icon="calendar" placeholder="Quarter Name" name="quarter_name" required/>
                        </div>
                    </div>
                </div>
                <div class="gy-3">
                    <div class="row g-3 align-center">
                        <div class="col-lg-5">
                            <x-inputs.verticalFormLabel label="Year" for="year" suggestion="Specify the year." required="true"/>
                        </div>
                        <div class="col-lg-7">
                            <x-inputs.text value="" for="year" icon="calender-date" placeholder="Quarter Name" name="year" required/>
                            <!-- <select class="form-control form-select" name="year" id="year" required>
                                <option value="">Select</option>
                                <option value="{{ date('Y', strtotime('-1 year')) }}">{{ date('Y', strtotime('-1 year')) }}</option>
                                <option value="{{ date('Y') }}">{{ date('Y') }}</option>
                                <option value="{{ date('Y', strtotime('+1 year')) }}">{{ date('Y', strtotime('+1 year')) }}</option>
                                <option value="{{ date('Y', strtotime('+2 year')) }}">{{ date('Y', strtotime('+2 year')) }}</option>
                                <option value="{{ date('Y', strtotime('+3 year')) }}">{{ date('Y', strtotime('+3 year')) }}</option>
                            </select> -->
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="userId" name="user_id" value="0">
            <div class="modal-footer bg-light">
                <div class="row">
                    <div class="col-lg-12 p-0 text-right">
                        <button class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Cancel</button>
                        <button class="btn btn-primary" type="submit">Submit</button>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- END: Modal - Add New Quarter -->

<script type="text/javascript">
    $('.eg-swal-av3').on("click", function (e) {
        Swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Yes, delete it!'
        }).then(function (result) {
          if (result.value) {
            Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
          }
        });
        e.preventDefault();
      });
</script>

@endsection
@push('footerScripts')
<script src="{{url('js/tableFlow.js')}}"></script>
<script type="text/javascript">

    function updateMassItems() {
        var arr = [];
        $('input.cb-check:checkbox:checked').each(function() {
            arr.push($(this).val());
        });

        var status = $('#mass-status').find(":selected").val();
        if (arr.length == 0) {
            Swal.fire("Please select a buyer first !");
        } else if (status == "") {
            Swal.fire("Please select bulk status !");
        } else {
            var root_url = "