@extends('layouts.admin')

@section('content')
    @php
        $sNo = request()->page ? request()->page * 10 - 10 : 0;
    @endphp
    <section class="section unique-dashboard-sec">
        <div class="section-body">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header custom-cart-header">
                            <h4>Divisions</h4>
                            <div class="new-card-header-form custom-search-form">
                                @php
                                    $role = 'admin';
                                    if (authRole() == 'Host') {
                                        $role = 'host';
                                    }
                                @endphp
                                <a class="btn btn-primary btn-lg float-end" href="{{ route($role . '.division.create') }}">Add
                                    Division</a>
                            </div>
                        </div>
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        <div class="card-body">
                            {{-- <form action="{{ route('admin.division.index') }}" method="GET">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <input type="text" name="search" class="form-control"
                                            value="{{ request('search') }}" placeholder="Search...">
                                    </div>

                                    <div class="col">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                        <a href="{{ route('admin.division.index') }}" class="btn btn-secondary">Clear</a>
                                    </div>
                                </div>
                            </form> --}}
                            <div class="table-responsive">
                                <table class="table table-striped table-md">
                                    <tr>
                                        <th>#Sno.</th>
                                        {{-- <th>Plan Type</th> --}}
                                        <th>Code</th>
                                        {{-- <th>For</th> --}}
                                        {{-- <th>Description</th> --}}
                                        <th>Status</th>
                                        <th>Created at</th>
                                        <th>Action</th>
                                    </tr>
                                    @forelse ($divisions as $key=>$division)
                                        <tr>
                                            <td>{{ $sNo + $key + 1 }}</td>
                                            <td>{{ $division->code }}</td>
                                            {{-- <td>{{ $plan->plan_type }}</td> --}}
                                            {{-- <td>{{ $plan->no_of_qrcodes ?? "" }}</td> --}}
                                            {{-- <td>
                                                {{ $division->type }}
                                            </td> --}}
                                            {{-- <td>{{ $division->description }}</td> --}}
                                            <td>
                                                <label>
                                                    <input type="checkbox" class="custom-switch-input"
                                                        @if ($division->status == '1') checked="checked" @endif
                                                        onchange="toggleStatus(this, 'Division', '{{ jsencode_userdata($division->id) }}');">
                                                    <span class="custom-switch-indicator"></span>
                                                </label>
                                            </td>
                                            <td>{{ $division->created_at->format('m/d/Y') }}</td>
                                            <td>
                                                <div class="db-comman-acton-btns">
                                                    {{-- <button type="button" class="btn btn-primary view-divisions"
                                                        data-toggle="modal"
                                                        data-url="{{ jsencode_userdata($division->id) }}"
                                                        data-target="#exampleModalLong">
                                                        <i class="password fas fa-eye fa-fw"></i>
                                                    </button> --}}
                                                    @if (authRole() == 'Administrator' || (authRole() == 'Host' && $division->user_id != 1))
                                                        <a class="btn btn-success icon-font-size"
                                                            href="{{ route(authRoleForWeb() . '.division.create', [jsencode_userdata($division->id)]) }}"
                                                            title="Edit">
                                                            <i class="fa-solid fa-pen-to-square "></i>
                                                        </a>
                                                        <a class="btn btn-danger delete-category confirm-delete"
                                                            href="{{ route(authRoleForWeb() . '.division.delete', [jsencode_userdata($division->id)]) }}"
                                                            title="Delete">
                                                            <i class="fa-solid fa-trash "></i>
                                                        </a>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td class="no-record-found" colspan="8">
                                                <center>Did not found any division</center>
                                            </td>
                                        </tr>
                                    @endforelse
                                </table>
                           
                                {{ $divisions->appends(request()->input())->links() }}

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

    {{-- view data --}}
    <!-- Button trigger modal -->
@endsection
<!-- Modal -->
{{-- <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Division Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <tr>
                        <td><b>Name</b></td>
                        <td class='sName'></td>
                    </tr>
                    <tr>
                        <td><b>Code</b></td>
                        <td class='sCode'></td>
                    </tr>
                    <tr>
                        <td><b>Description</b></td>
                        <td class='sDescription text-ellipse'>
                            <p></p>
                        </td>
                    </tr>
                    <tr>
                        <td><b>Content</b></td>
                        <td class='sContent text-ellipse'></td>
                    </tr>
                    <tr>
                        <td><b>For</b></td>
                        <td class="sFor"></td>
                    </tr>
                    <tr>
                        <td><b>Status</b></td>
                        <td class='sStatus'></td>
                    </tr>
                    <tr>
                        <td><b>Created at</b></td>
                        <td class='sCreated'></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div> --}}
@push('pagespecificscripts')
    <script>
        jQuery(document).ready(function() {
            jQuery('.view-divisions').click(function() {
                let divisionId = jQuery(this).data('url');
                let url = "{{ route(authRoleForWeb() . '.division.fetchDivision', ['id' => 'did']) }}"
                    .replace(
                        'did', divisionId);
                let response = ajaxCall(url, 'get');
                response.then(function(response) {
                    jQuery('.sName').html(response.data.name);
                    jQuery('.sCode').html(response.data.code);
                    jQuery('.sDescription').html(`<p>${response.data.description}</p>`);
                    jQuery('.sContent').html(response.data.content);
                    jQuery('.sFor').html(response.data.type);
                    var status = 'Inactive';
                    if (response.data.status == 1) {
                        status = 'Active';
                    }

                    // Convert the date string to a Date object
                    var date = new Date(response.data.created_at);

                    // Get the month, day, and year
                    var month = (date.getMonth() + 1).toString().padStart(2,
                        '0'); // Months are 0-based
                    var day = date.getDate().toString().padStart(2, '0');
                    var year = date.getFullYear();
                    // Format the date as m/d/Y
                    var formattedDate = month + '/' + day + '/' + year;
                    // Output the formatted date
                    jQuery('.sStatus').html(status);
                    jQuery('.sCreated').html(formattedDate);
                })
            })
        })
    </script>
@endpush