@extends('layouts.app')

@section('content')
<div class="contents">
    <div class="crm mb-25">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 d-flex justify-content-end">
                    @include('layouts.navigation')
                </div>

                <div class="col-lg-12">
                    <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                        <h2 class="breadcrumb-title">User Type List</h2>
                        <button class="btn btn-primary btn-squared" data-bs-toggle="modal" data-bs-target="#modal-basic">
                            Add User Type <i class="fa-solid fa-plus ms-2"></i>
                        </button>
                    </div>
                </div>

                <div class="col-xxl-12">
                    <div class="userDatatable adv-table-table global-shadow border-light-0 w-100 adv-table">
                        <div class="table-responsive">
                            <div id="filter-form-container"></div>
                            <table class="table mb-0 table-borderless adv-table table-striped">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th>S.No.</th>
                                        <th>User Type Name</th>
                                        <th>Image</th>
                                        <th class="d-flex justify-content-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($data as $key => $value)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $value->name }}</td>
                                        <td>
                                            @if($value->image)
                                                @if(pathinfo($value->image, PATHINFO_EXTENSION) == 'svg')
                                                    {!! file_get_contents(public_path('uploads/usertype/'.$value->image)) !!}
                                                @else
                                                    <img src="{{ asset('uploads/usertype/'.$value->image) }}" alt="Image" width="50">
                                                @endif
                                            @endif
                                        </td>
                                        <td>
                                            <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                                @can('update permission')
                                                <li>
                                                    <a href="javascript:void(0)" class="edit text-success edit-permission-btn"
                                                        data-id="{{ $value->id }}"
                                                        data-name="{{ $value->name }}"
                                                        data-image="{{ $value->image }}"
                                                        title="Edit">
                                                        <i class="fas fa-pen"></i>
                                                    </a>
                                                </li>
                                                @endcan
                                                @can('delete permission')
                                                <li>
                                                    <a href="javascript:void(0)" class="remove text-danger mx-2 delete-btn"
                                                        data-id="{{ $value->id }}" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </a>
                                                </li>
                                                @endcan
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal-basic" tabindex="-1" aria-labelledby="modalBasicLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content modal-bg-white">
                    <div class="modal-header">
                        <h3 class="modal-title">Create User Type</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="permissionForm" class="p-3" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="permission_id" id="permission_id">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="permission_name">User Type Name <span class="text-danger">*</span></label>
                                        <input type="text" id="permission_name" name="name" class="form-control" placeholder="Enter Role Name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="permission_image">User Type Image</label>
                                        <input type="file" id="permission_image" name="image" class="form-control">
                                        <small class="text-muted">Optional. Allowed types: jpg, png, jpeg, svg.</small>
                                        <div id="image-preview" class="mt-2"></div>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <button type="submit" id="permissionSubmit" class="btn btn-primary w-30 mx-auto">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Scripts --}}
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(function () {
                $.ajaxSetup({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                });

                // Open modal for add
                $('[data-bs-target="#modal-basic"]').on('click', function () {
                    $('#modal-basic .modal-title').text('Create User Type');
                    $('#permissionForm')[0].reset();
                    $('#permission_id').val('');
                    $('#permissionSubmit').text('Save');
                    $('#image-preview').html('');
                });

                // Edit button click
                $(document).on('click', '.edit-permission-btn', function () {
                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    const image = $(this).data('image');

                    $('#modal-basic .modal-title').text('Edit User Type');
                    $('#permission_id').val(id);
                    $('#permission_name').val(name);
                    $('#permissionSubmit').text('Update');

                    if(image){
                        const ext = image.split('.').pop().toLowerCase();
                        if(ext === 'svg'){
                            $.get("{{ asset('uploads/usertype/') }}/" + image, function(data){
                                $('#image-preview').html(data);
                            });
                        } else {
                            $('#image-preview').html(`<img src="{{ asset('uploads/usertype/') }}/${image}" width="100">`);
                        }
                    } else {
                        $('#image-preview').html('');
                    }

                    $('#modal-basic').modal('show');
                });

                // Delete button
                $(document).on('click', '.delete-btn', function(){
                    const id = $(this).data('id');
                    Swal.fire({
                        title: 'Are you sure?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if(result.isConfirmed){
                            $.ajax({
                                url: "{{ url('usertype') }}/" + id,
                                method: 'POST',
                                data: {_method: 'DELETE'},
                                success: function(){ location.reload(); },
                                error: function(){ Swal.fire('Error','Something went wrong!','error'); }
                            });
                        }
                    });
                });

                // AJAX form submit
                $('#permissionForm').on('submit', function (e) {
                    e.preventDefault();
                    const id = $('#permission_id').val();
                    const url = id ? "{{ url('usertype') }}/" + id : "{{ url('usertype') }}";
                    let formData = new FormData(this);
                    if(id) formData.append('_method','PUT');

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                            $('#modal-basic').modal('hide');
                            Swal.fire({icon:'success', title:'Success', timer:2000, showConfirmButton:false})
                                .then(()=> location.reload());
                        },
                        error: function (xhr) {
                            const message = xhr.responseJSON?.message || 'Something went wrong!';
                            Swal.fire({icon:'error', title:'Error', text:message});
                        }
                    });
                });
            });
        </script>
    </div>
</div>
@endsection