@extends('Admin.layout.master')
@section('content')
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Card-->
            <div class="card">
                <!--begin::Card header-->
                <div class="card-header border-0 pt-6">
                    <!--begin::Card title-->
                    <!--begin::Card toolbar-->
                    <div class="card-toolbar">
                        <!--begin::Group actions-->
                        <div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
                            <div class="fw-bolder me-5">
                                <span class="me-2" data-kt-user-table-select="selected_count"></span>Selected
                            </div>
                            <button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete Selected</button>
                        </div>
                        <!--end::Group actions-->
                    </div>
                    <!--end::Card toolbar-->
                    <div class="card-toolbar">
                        <!--begin::Action-->
                        <a href="#" class="btn btn-sm btn-primary fs-6 px-8 py-4" data-bs-toggle="modal" data-bs-target="#kt_modal_new_category">Add New Category</a>
                        <!--end::Action-->
                    </div>
                </div>
                <!--end::Card header-->
                <div class="card-body py-4">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users" style="display: inline-table">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                <th>id</th>
                                <th class="min-w-125px">Name</th>
                                <th class="min-w-125px">Type</th>
                                <th class="min-w-125px">Created at</th>
                                <th class="min-w-125px">Current Status</th>
                                <th class="min-w-100px">Update Status</th>
                                <th class="min-w-125px text-center">Actions</th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-gray-600 fw-bold">
                            @foreach ($categories as $category)
                                <tr>
                                    <td class="ps-2">{{ $loop->iteration }}</td>
                                    <td>
                                        <span class="text-gray-800 mb-1">{{ $category->name }}</span>
                                    </td>
                                    <td>{{ $category->type }}</td>
                                    <td>{{ $category->created_at }}</td>
                                    <td>
                                        @if ($category->status == 'active')
                                            <div class="badge badge-light-success fw-bolder">{{ ucfirst(trans($category->status)) }}</div>
                                        @elseif ($category->status == 'in-active')
                                            <div class="badge badge-light-primary fw-bolder">{{ ucfirst(trans($category->status)) }}</div>
                                        @else
                                            <div class="badge badge-light-danger fw-bolder">{{ ucfirst(trans($category->status)) }}</div>
                                        @endif
                                    </td>
                                    <td>
                                        <select data-id="{{ $category->id }}" class="form-control category-status" name="category-status">
                                            <option value="active" {{ $category->status == 'active' ? 'selected' : '' }}>Active</option>
                                            <option value="in-active" {{ $category->status == 'in-active' ? 'selected' : '' }}>In-Active</option>
                                        </select>
                                    </td>
                                    <td>
                                        <div class="d-flex justify-content-center flex-shrink-0">
                                            <a class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1 edit-category" data-bs-toggle="modal" data-bs-target="#kt_modal_edit_category" data-url="{{ route('category.edit', $category->id) }}" >
                                                <!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
                                                <span class="svg-icon svg-icon-3">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="currentColor"></path>
                                                        <path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->
                                            </a>
                                            <a class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm delete-category" data-category_id={{ $category->id }}>
                                                <!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
                                                <span class="svg-icon svg-icon-3">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor"></path>
                                                        <path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor"></path>
                                                        <path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <!--end::Table body-->
                    </table>
                    <!--end::Table-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
    <!--begin::Modal - New Category-->
    <div class="modal fade" id="kt_modal_new_category" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Form-->
                <form class="category-form" id="category-form" id="kt_modal_new_address_form">
                    @csrf
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_new_address_header">
                        <!--begin::Modal title-->
                        <h2>Add New Category</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <!--begin::Scroll-->
                        <div class="scroll-y me-n7 pe-7" id="kt_modal_new_address_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_new_address_header" data-kt-scroll-wrappers="#kt_modal_new_address_scroll" data-kt-scroll-offset="300px">
                            <!--begin::Input group-->
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold mb-2">Name</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input class="form-control form-control-solid" placeholder="Enter Category Name" name="name" />
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold mb-2">Type</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input class="form-control form-control-solid" placeholder="Enter Category Type" name="type" />
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold mb-2">Status</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <select class="form-control form-control-solid" name="status">
                                    <option value="">Select...</option>
                                    <option value="active">Active</option>
                                    <option value="in-active">In-active</option>
                                </select>
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Scroll-->
                    </div>
                    <!--end::Modal body-->
                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="submit" class="btn btn-primary" id="category-submit">Submit</button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
    <!--end::Modal - New Category-->

    <!--begin::Modal - Edit Category-->
    <div class="modal fade" id="kt_modal_edit_category" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Form-->
                <form id="kt_modal_update_category_form">
                    @csrf
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_new_address_header">
                        <!--begin::Modal title-->
                        <h2>Edit Category</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <!--begin::Scroll-->
                        <div class="scroll-y me-n7 pe-7" id="kt_modal_new_address_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_new_address_header" data-kt-scroll-wrappers="#kt_modal_new_address_scroll" data-kt-scroll-offset="300px">
                            <!--begin::Input group-->
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold mb-2">Name</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input class="form-control form-control-solid" type="hidden" name="id" id="id"/>
                                <input class="form-control form-control-solid" name="name" id="name"/>
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold mb-2">Type</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input class="form-control form-control-solid" name="type" id="type"/>
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Scroll-->
                    </div>
                    <!--end::Modal body-->
                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="submit" class="btn btn-primary" id="update-category">Submit</button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
    <!--end::Modal - Edit Category-->
@endsection

@section('script')
    <script>
        $('#category-form').on('submit', function(e) {
            e.preventDefault();
            var form = $(this)[0];

            var data = new FormData(form);

            $.ajax({
                type: "POST",
                url: "{{ route('category.store') }}",
                data: data,
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    $('#kt_modal_new_category').modal("hide");
                    var category = data.data;
                    console.log(category);
                    $('#kt_table_users tbody').append(`
                    <tr>
                        <td class="ps-2">{{ 10 }}</td>
                        <td>
                            <span class="text-gray-800 mb-1"> ${category.name} </span>
                        </td>
                        <td> ${category.type} </td>
                        <td> ${category.created_at} </td>
                        <td>
                            <div class="badge badge-light-success fw-bolder">${category.status}</div>
                        </td>
                        <td>
                            <select data-id="${category.id}" class="form-control category-status" name="category-status">
                                <option value="active"  ${category.status} == 'active' ? 'selected' : '' >Active</option>
                                <option value="in-active"  ${category.status} == 'in-active' ? 'selected' : '' >In-Active</option>
                            </select>
                        </td>
                        <td>
                            <div class="d-flex justify-content-center flex-shrink-0">
                                <a class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1 edit-category" data-bs-toggle="modal" data-bs-target="#kt_modal_edit_category" data-url="${category.id}" >
                                    <!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
                                    <span class="svg-icon svg-icon-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="currentColor"></path>
                                            <path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </a>
                                <a class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm delete-category" data-category_id= ${category.id} >
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
                                    <span class="svg-icon svg-icon-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor"></path>
                                            <path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor"></path>
                                            <path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </a>
                            </div>
                        </td>
                    </tr>
                    `);
                    Swal.fire(
                        'Good job!',
                        'New Category Added Successfully!',
                        'success'
                    )
                },

                error: function(e) {

                    var parseData = JSON.parse(e.responseText);
                    let message = parseData.data;

                    if (parseData.message) {
                        Swal.fire(
                            'Incorrect...',
                            parseData.message,
                            'error'
                        );
                    }
                }
            });
        });

        $('.delete-category').on('click', function(e) {
            var data = {
                category_id: $(this).attr("data-category_id"),
            }
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        },
                        type: "POST",
                        url: "{{ route('category.delete') }}",
                        data: data,
                        cache: false,
                        success: function(data) {

                            Swal.fire(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                        },

                        error: function(e) {

                            var parseData = JSON.parse(e.responseText);
                            let message = parseData.data;

                            if (parseData.message) {
                                Swal.fire(
                                    'Incorrect...',
                                    parseData.message,
                                    'error'
                                );
                            }
                        }
                    });
                }
            })
        });

        $('.category-status').change(function() {
            var status = this.value;
            var user_id = $(this).data('id');

            var data = {
                status: status,
                user_id: user_id
            }

            Swal.fire({
                title: 'Are you sure?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        },
                        type: "POST",
                        url: "{{ route('category.change.status') }}",
                        data: data,
                        cache: false,
                        success: function(data) {

                            Swal.fire(
                                'Modified!',
                                'Status changed successfully!',
                                'success'
                            )
                        },

                        error: function(e) {

                            var parseData = JSON.parse(e.responseText);
                            let message = parseData.data;

                            if (parseData.message) {
                                Swal.fire(
                                    'Incorrect...',
                                    parseData.message,
                                    'error'
                                );
                            }
                        }
                    });
                }
            })

        })

        $('body').on('click', '.edit-category', function () {
            var userURL = $(this).data('url');

            $.get(userURL, function (data) {

                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#type').val(data.type);
            })
        });

        $('body').on('submit', '#kt_modal_update_category_form  ', function (e) {
            e.preventDefault();

            var form = $(this)[0];
            var data = new FormData(form);

            Swal.fire({
                title: 'Are you sure?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        type: "POST",
                        url: "{{ route('category.update') }}",
                        data: data,
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function(data) {
                            $('#kt_modal_edit_category').modal("hide");
                            Swal.fire(
                                'Good job!',
                                'Category Updated Successfully!',
                                'success'
                            )
                        },

                        error: function(e) {

                            var parseData = JSON.parse(e.responseText);
                            let message = parseData.data;

                            if (parseData.message) {
                                Swal.fire(
                                    'Incorrect...',
                                    parseData.message,
                                    'error'
                                );
                            }
                        }
                    });
                }
            })
        });
    </script>
@stop