@include('admin.common-layout.header')
<div class="dashboard-main-body">
    <div class="breadcrumb d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <div class="">
            <h1 class="fw-semibold mb-4 h6 text-primary-light">Mapping List </h1>
            <div class="">
                <a href="javascript:void(0);" class="text-secondary-light hover-text-primary hover-underline">Dashboard </a>
                <span class="text-secondary-light">/ MApping List </span>
            </div>
        </div>
        <button type="button" class="my-sidebar-btn btn btn-primary-600 d-flex align-items-center gap-6">
            <span class="d-flex text-md">
                <i class="ri-add-large-line"></i>
            </span>
            Add Mapping
        </button>
    </div>

    <div class="mt-24">
        <div class="card h-100">
            <div class="card-body p-0 dataTable-wrapper">

                <!--<div class="d-flex align-items-center justify-content-between flex-wrap gap-16 px-20 py-12 border-bottom border-neutral-200">
                    <div class="d-flex flex-wrap align-items-center gap-16">
                        <div class="dropdown">
                            <button type="button"
                                class="px-12 py-5-px border border-neutral-300 radius-8 d-flex align-items-center gap-20 "
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="d-flex align-items-center gap-1 text-secondary-light text-sm">
                                    <i class="ri-file-upload-line text-md line-height-1"></i>
                                    Export
                                </span>
                                <span class="">
                                    <i class="ri-arrow-down-s-line"></i>
                                </span>
                            </button>
                            <ul class="dropdown-menu p-12 border bg-base shadow">
                                <li>
                                    <button type="button"
                                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                        data-bs-toggle="modal" data-bs-target="#exampleModalView">
                                        <i class="ri-file-3-line"></i>
                                        PDF
                                    </button>
                                </li>
                                <li>
                                    <button type="button"
                                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                        data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                                        <i class="ri-file-excel-line"></i>
                                        Excel
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <form class="navbar-search dt-search m-0">
                            <input type="text" class="dt-input bg-transparent radius-4" aria-controls="dataTable"
                                name="search" placeholder="Search...">
                            <iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
                        </form>
                    </div>
                    <div class="d-flex align-items-center gap-8 text-secondary-light">
                        <span class="">
                            Rows per page:
                        </span>
                        <div class="dt-length">
                            <select name="dataTable_length" aria-controls="dataTable"
                                class="dt-input form-control form-select">
                                <option value="5">5</option>
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                </div>!-->

                <div class="p-0">
                    <table class="table bordered-table mb-0 data-table" id="dataTable" data-page-length='10'>
                        <thead>
                            <tr>
                                <th scope="col">
                                    <div class="form-check style-check d-flex align-items-center">
                                        <!-- <input class="form-check-input" type="checkbox"> -->
                                        <label class="form-check-label">SR.No</label>
                                    </div>
                                </th>
                                <th scope="col">Board</th>
                                <th scope="col">Class</th>
                                <th scope="col">Stream</th>
                                <th scope="col">Subject</th>
                                <th scope="col">Status</th>
                                <th scope="col">Registered At</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $sr=1; @endphp
                            @foreach($mappings as $map)
                            <tr id="mapping-row-{{ $map->id }}">
                                <td>
                                    <div class="form-check style-check d-flex align-items-center">
                                        <!-- <input class="form-check-input" type="checkbox"> -->
                                        <label class="form-check-label">{{ $sr }}</label>
                                    </div>
                                </td>
                                <td>{{ $map->board->board_name ?? '' }}</td>
                                <td>{{ $map->class->classes_name ?? '-' }}</td>
                                <td>{{ $map->stream }}</td>
                                <td>{{ $map->subject->subjects_name ?? '-' }}</td>
                                <td> 
                                    @if($map->status==1)
                                    <span class="bg-success-100 text-success-600 px-24 py-4 radius-4 fw-medium text-sm">Active</span>
                                    @else
                                    <span class="bg-danger-100 text-danger-600 px-24 py-4 radius-4 fw-medium text-sm">Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    @if(!empty($map->created_at))
                                        {{ date('d-m-Y', strtotime($map->created_at)) }}
                                    @else
                                        
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="text-primary-light text-xl" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                                            <iconify-icon icon="tabler:dots-vertical"></iconify-icon>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-lg-end border p-12">
                                            <li>
                                                <button type="button" class="edit-sidebar-btn edit-mapping-btn dropdown-item rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-2 py-6" data-id="{{ $map->id }}" data-board="{{ $map->board_id }}" data-class="{{ $map->class_id }}" data-subject="{{ $map->subject_id }}" data-stream="{{ $map->stream }}" data-status="{{ $map->status }}">
                                                    <i class="ri-edit-2-line"></i>
                                                    Edit
                                                </button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item delete-mapping-btn rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-2 py-6" type="button" data-id="{{ $map->id }}" data-bs-toggle="modal" data-bs-target="#exampleModalDeleteMapping">
                                                    <i class="ri-delete-bin-6-line"></i>
                                                    Delete
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @php $sr++; @endphp
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add sidebar start -->
<div class="my-sidebar bg-white position-fixed end-0 top-0 h-100vh overflow-y-auto z-99 max-w-700-px w-100 translate-x-full duration-300 active-translate-0">
    <div class="px-20 py-12 border-bottom d-flex align-items-center justify-content-between gap-20">
        <h5 class="text-lg mb-0">Add New Mapping </h5>
        <button type="button" class="close-my-sidebar text-danger-600 text-lg d-flex">
            <i class="ri-close-large-line"></i>
        </button>
    </div>
    <form action="#" class="d-flex flex-column p-20" id="addMappingForm">
        @csrf
        <div class="row g-3">
            <div class="col-sm-12">
                <div class="">
                    <label for="selectSectionTwo" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Board</label>
                     <select name="board_id" id="selectSectionTwo" class="form-control form-select">
                        <option value="" selected disabled>Select Board</option>
                        <!--Fetch data from master table of board !-->
                        @foreach($boards as $board)
                        <option value="{{ $board->id }}">{{ $board->board_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Class</label>
                    <select name="class_id" id="sectionName" class="form-control form-select">
                        <option value="">Select Class</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}">{{ $class->classes_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Stream</label>
                    <input type="text" name="stream" class="form-control" placeholder="Enter Stream">
                </div>
            </div>
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Subject</label>
                    <select name="subject_id" class="form-control form-select" required>
                        <option value="">Select Subject</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}">{{ $subject->subjects_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionStatus" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Status</label>
                    <select name="status" id="sectionStatus" class="form-control form-select">
                        <option value="" selected disabled>Select Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-center gap-3 mt-8">
                    <button type="reset" class="border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-50 py-11 radius-8">Cancel</button>
                    <button type="submit" class="btn btn-primary-600 border border-primary-600 text-md px-28 py-12 radius-8 max-w-156-px w-100">Save</button>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- Add sidebar end -->

<!-- Edit sidebar start -->
<div class="edit-sidebar bg-white position-fixed end-0 top-0 h-100vh overflow-y-auto z-99 max-w-700-px w-100 translate-x-full duration-300 active-translate-0">
    <div class="px-20 py-12 border-bottom d-flex align-items-center justify-content-between gap-20">
        <h5 class="text-lg mb-0">Edit Mapping</h5>
        <button type="button" class="close-edit-sidebar text-danger-600 text-lg d-flex">
            <i class="ri-close-large-line"></i>
        </button>
    </div>
    <form action="#" class="d-flex flex-column p-20" id="editMappingForm">
        @csrf
        <div class="row g-3">
            <div class="col-sm-12">
                <div class="">
                    <input type="hidden" name="id" id="editMappingId">
                    <label for="editBoard" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Board</label>
                    <select name="board_id" id="editBoard" class="form-control form-select">
                        <option value="" disabled>Select Board</option>
                        @foreach($boards as $board)
                            <option value="{{ $board->id }}">{{ $board->board_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionNameEdit" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Class</label>
                    <select name="class_id" id="editClass" class="form-control form-select">
                        <option value="" disabled>Select Class</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}">{{ $class->classes_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionNameEdit" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Stream</label>
                    <input type="text" name="stream" id="editStream" class="form-control" placeholder="Enter stream">
                </div>
            </div>
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionNameEdit" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Subject</label>
                    <select name="subject_id" id="editSubject" class="form-control form-select">
                        <option value="" disabled>Select Subject</option>
                        @foreach($subjects as $subject)
                        <option value="{{ $subject->id }}">{{ $subject->subjects_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="">
                    <label for="sectionStatusEdit" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Status</label>
                    <select name="status" id="editStatus" class="form-control form-select">
                        <option value="" disabled>Select Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-center gap-3 mt-8">
                    <button type="reset" class="border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-50 py-11 radius-8">Cancel</button>
                    <button type="submit" class="btn btn-primary-600 border border-primary-600 text-md px-28 py-12 radius-8">Update</button>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- Edit sidebar end -->


<!-- Modal Delete Event start -->
<div class="modal fade" id="exampleModalDeleteMapping" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog modal-dialog-centered max-w-340-px">
        <div class="modal-content radius-16 bg-base">
            <div class="modal-body pt-32 px-36 pb-24 text-center">
                <span class="mb-16 fs-1 line-height-1 text-danger">
                    <iconify-icon icon="fluent:delete-24-regular" class="menu-icon"></iconify-icon>
                </span>
                <h6 class="text-lg fw-semibold text-primary-light mb-0">Are your sure you want to Delete this Mapping</h6>
                <div class="d-flex align-items-center justify-content-center gap-3 mt-24">
                    <button type="reset" class="flex-grow-1 border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-24 py-11 radius-8" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="confirmDeleteMapping" class="flex-grow-1 btn btn-primary-600 border border-primary-600 text-md px-16 py-12 radius-8">Yes, Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal Delete Event end -->
@include('admin.common-layout.footer')

<script>
    // Sidebar js start
    $('.my-sidebar-btn').on('click', function () {
        $('.my-sidebar').addClass('active');
        $('.overlay').addClass('active');
    });
    $('.close-my-sidebar, .overlay').on('click', function () {
        $('.my-sidebar').removeClass('active');
        $('.overlay').removeClass('active');
    });


    $('.edit-sidebar-btn').on('click', function () {
        $('.edit-sidebar').addClass('active');
        $('.overlay').addClass('active');
    });
    $('.close-edit-sidebar, .overlay').on('click', function () {
        $('.edit-sidebar').removeClass('active');
        $('.overlay').removeClass('active');
    });
    // Sidebar js end
</script>