@extends('Admin.layout')

@section('content')
<div class="row align-items-center justify-content-between mb-3">
    <!-- Heading -->
    <div class="col-auto">
        <h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="Custom_product_table"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a></button>Add Material</h5>
    </div>

    <!-- Button -->
    <div class="col-auto">
        <a href="Custom_product_table"> <button class="btn buttons-collection btn-primary" type="button"
                aria-haspopup="dialog" aria-expanded="false">
                <span class="d-flex align-items-center gap-2">
                    <span class="d-sm-inline-block">View Table</span>
                </span>
            </button></a>
    </div>
</div>
<div class="card p-5">

    <div class="form-section">
        <h5>Add Material</h5>
        <form id="MaterialForm" method="POST" action="{{ route('add_material_form') }}">
            @csrf
            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="material"> Enter Material</label>
                    <input type="text" class=" form-control" id="material" name="material" value="{{ old('material') }}" placeholder="Enter Material">
                    @error('material') <div class="text-danger">{{ $message }}</div> @enderror

                </div>
            </div>


            <div class="form-actions d-flex justify-content-center mt-4">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                    data-bs-target="#material_submit">Submit</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>

</div>



<div class="card">
    <div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto mt-3">
        <div class="dt-buttons btn-group flex-wrap mb-0">
            <div class="btn-group">
                <button id="exportproductBtn" class="btn buttons-collection btn-label-secondary dropdown-toggle me-4"
                    tabindex="0" aria-controls="DataTables_Table_0" type="button" aria-haspopup="dialog"
                    aria-expanded="false"><span><span class="d-flex align-items-center gap-2"><i
                                class="icon-base ti tabler-upload icon-xs me-sm-1"></i> <span
                                class="d-sm-inline-block">Export</span></span></span></button>
            </div>
        </div>
    </div>
    <div class="card-datatable table-responsive pt-0">

        <div class="justify-content-between dt-layout-table">
            <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                <table id="custom_product" class="table">
                    <thead>

                        <tr>
                            <th>SNO</th>
                            <th>DATE</th>
                            <th>MATERIAL</th>
                            <th>IS_ACTIVE</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($materials as $index => $material)

                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $material->created_at->format('d-m-Y') }}</td>
                            <td>{{ $material->material }}</td>
                            <td>{{ $material->is_active ? 'Active' : 'Inactive' }}</td>

                            <td>
                                <div class="d-flex align-items-center ">

                                    <!-- Delete Button -->
                                    <a href="#"
                                        class="action-btn-danger d-flex align-items-center justify-content-center"
                                        data-bs-toggle="modal"
                                        data-id="{{ $material->id }}"
                                        onclick="setDeleteId(this)"
                                        data-bs-target="#delete_material"
                                        style="width: 32px; height: 32px;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 22 22" fill="none">
                                            <path d="M19.25 5.48C16.19 5.18 13.12 5.02 10.06 5.02C8.25 5.02 6.43 5.11 4.62 5.30L2.75 5.48"
                                                stroke="#FF0004" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7.79 4.55L7.99 3.35C8.14 2.48 8.25 1.83 9.79 1.83H12.20C13.75 1.83 13.86 2.52 14.00 3.36L14.20 4.55"
                                                stroke="#FF0004" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M17.27 8.37L16.68 17.60C16.58 19.04 16.49 20.16 13.94 20.16H8.05C5.49 20.16 5.41 19.04 5.31 17.60L4.72 8.37"
                                                stroke="#FF0004" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M9.46 15.12H12.52" stroke="#FF0004" stroke-width="1.5" stroke-linecap="round" />
                                            <path d="M8.70 11.45H13.29" stroke="#FF0004" stroke-width="1.5" stroke-linecap="round" />
                                        </svg>
                                    </a>

                                    <!-- Toggle Button -->
                                    <a href="#"
                                        class="action-btn d-flex align-items-center justify-content-center"
                                        data-bs-toggle="modal"
                                        data-bs-target="#toggle_status"
                                        onclick="setToggleId(this)"
                                        data-id="{{ $material->id }}"
                                        data-active="{{ $material->is_active }}"
                                        style="width: 34px; height: 32px;">

                                        <i id="toggle_icon_{{ $material->id }}"
                                            class="ti {{ $material->is_active ? 'tabler-eye' : 'tabler-eye-off' }} menu-icon icon-base"></i>

                                    </a>


                                </div>
                            </td>
                            @endforeach
                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>


<!-- //  submit modal -->

<div class="modal fade" id="material_submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="delete_material" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you sure you want to delete this material?</p>

            <form id="DeleteForm" method="POST" action="{{ route('delete_material') }}">
                @csrf
                <input type="hidden" name="id" id="delete_material_id">

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                        Yes, Delete
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- toggle status -->
<div class="modal fade" id="toggle_status" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted" id="toggle_status_text"></p>
            <form id="ToggleForm" method="POST" action="{{ route('toggle_status_hide') }}">
                @csrf
                <input type="hidden" name="id" id="toggle_staff_id">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold  me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_toggle" class="btn btn-gray p-3 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
        </div>
    </div>
</div>





<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
    //add material
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();

        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('MaterialForm').submit();
    });

    //delete
    function setDeleteId(button) {
        document.getElementById('delete_material_id').value = button.getAttribute('data-id');
    }

    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });

    //toggle_status
    function setToggleId(button) {
        const materialId = button.getAttribute('data-id');
        const isActive = button.getAttribute('data-active') === '1';

        document.getElementById('toggle_staff_id').value = materialId;

        const statusText = document.getElementById('toggle_status_text');

        // Change modal text
        statusText.textContent = isActive ?
            "Are you sure you want to hide this material?" :
            "Are you sure you want to unhide this material?";

        // Change icon preview
        const icon = document.getElementById(`toggle_icon_${materialId}`);
        if (icon) {
            icon.classList.remove('tabler-eye', 'tabler-eye-off');
            icon.classList.add(isActive ? 'tabler-eye-off' : 'tabler-eye');
        }
    }

    // Disable button on submit
    document.getElementById('ToggleForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_toggle');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>
@endsection