@extends('layouts.backapp')

@section('content')
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <p>{{ session('success') }}</p>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif
  
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-line-chart"></i>
            </span>
            <h3 class="kt-portlet__head-title">
                Role & Privileges
            </h3>
        </div>
        @can('create', $menus['roleprivileges.index'])
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <div class="kt-portlet__head-actions">
                    <button type="button" class="btn btn-bold btn-label-brand btn-sm" data-toggle="modal" data-target="#roleModal"> Tambah </button>
                </div>
            </div>
        </div>
        @endcan
    </div>

    <div class="kt-portlet__body">
        <div class="table-responsive">
            <!--begin: Datatable -->
            <table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Role</th>
                        <th>Dealer Tambahan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($roles as $role)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $role->name }}</td>
                        <td>
                            @if($role->dealers->count() > 0)
                                <div class="dealer-list">
                                    @foreach($role->dealers->take(3) as $dealer)
                                        <span class="badge badge-info mr-1 mb-1">{{ $dealer->name }}</span>
                                    @endforeach
                                    @if($role->dealers->count() > 3)
                                        <span class="badge badge-secondary">+{{ $role->dealers->count() - 3 }} more</span>
                                    @endif
                                </div>
                            @else
                                <span class="text-muted">Tidak ada dealer tambahan untuk role ini</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex">
                                @can('update', $menus['roleprivileges.index'])
                                <button class="btn btn-sm btn-bold btn-warning mr-2" onclick="editRole({{$role->id}})"> Edit</button>    
                                @endcan
                                @can('delete', $menus['roleprivileges.index'])
                                <button class="btn btn-sm btn-bold btn-danger mr-2" onclick="deleteRole({{$role->id}}, '{{$role->name}}')">Hapus</button>    
                                @endcan
                                @can('create', $menus['roleprivileges.index'])
                                    <button class="btn btn-sm btn-bold btn-success" onclick="assignDealer({{$role->id}})"> Tambah Dealer</button>    
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <!--end: Datatable -->
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <form action="{{ route('roleprivileges.store') }}" method="post">
        @csrf
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="roleModalLabel">Tambah Role & Privileges</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
                <label for="role">Nama Role Baru </label>
                <input type="text" class="form-control @error('role') is-invalid @enderror" name="role" id="role">
                @error('role')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            <div class="container @error('privileges') is-invalid @enderror" id="role-privilege">
                @foreach ($menus as $menu)
                <div>
                    <h5>{{ $menu->name }}</h5>
                    <div class="row">
                        @if ($menu->link == 'adminarea' || $menu->link == 'mechanicarea')
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][view]">
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][create]">
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][update]">
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][delete]">
                            </div>  
                        </div>
                        @else
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Create</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][create]">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Update</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][update]">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Delete</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][delete]">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][view]">
                            </div>  
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @error('privileges')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </div>
    </form>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="roleEditModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <form action="" method="post">
          @csrf
          @method('PUT')
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="roleModalLabel">Tambah Role & Privileges</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                  <label for="role">Nama Role Baru </label>
                  <input type="text" class="form-control @error('role') is-invalid @enderror" name="role" id="role">
                  @error('role')
                      <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                      </span>
                  @enderror
              </div>
              <div class="container" id="role-privilege-edit">
                 
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
          </div>
      </form>
    </div>
</div>
<div class="modal fade" id="assignDealerModal" tabindex="-1" role="dialog" aria-labelledby="assignDealerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form id="assignDealerForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignDealerModalLabel">
                        Assign Dealer ke Role
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-light border">
                        <strong>Petunjuk:</strong> Pilih dealer yang akan di-assign ke role ini. Dealer yang sudah di-assign akan otomatis tercentang.
                    </div>
                    
                    <div class="form-group">
                        <label class="font-weight-bold">
                            Daftar Dealer
                        </label>
                        <div class="dealer-checkboxes border rounded p-3" style="max-height: 350px; overflow-y: auto;">
                            <div class="row">
                                @foreach ($dealers as $dealer)
                                    <div class="col-md-6 mb-2">
                                        <div class="form-check custom-checkbox">
                                            <input class="form-check-input dealer-checkbox" type="checkbox" 
                                                   name="dealers[]" value="{{ $dealer->id }}" 
                                                   id="dealer_{{ $dealer->id }}">
                                            <label class="form-check-label d-flex align-items-center" for="dealer_{{ $dealer->id }}">
                                                <div class="dealer-info">
                                                    <div class="dealer-name font-weight-semibold">{{ $dealer->name }}</div>
                                                    <div class="dealer-code text-muted small">
                                                        <i class="fas fa-tag mr-1"></i>
                                                        {{ $dealer->dealer_code }}
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <button type="button" class="btn btn-outline-primary btn-sm mr-2" onclick="selectAllDealers()">
                                    Pilih Semua
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="deselectAllDealers()">
                                    Hapus Semua
                                </button>
                            </div>
                            <div class="text-muted small">
                                <span id="selectedCount">0</span> dealer dipilih
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Batal
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        Simpan Perubahan
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('styles')
<style>
    .custom-checkbox .form-check-label {
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s ease;
        width: 100%;
    }
    
    .custom-checkbox .form-check-label:hover {
        background-color: #f8f9fa;
    }
    
    .custom-checkbox .form-check-input:checked + .form-check-label {
        background-color: #e8f5e8;
        border-left: 3px solid #28a745;
    }
    
    .dealer-info {
        flex: 1;
        margin-left: 0.5rem;
    }
    
    .dealer-name {
        font-weight: 500;
        margin-bottom: 0.125rem;
    }
    
    .dealer-code {
        font-size: 0.75rem;
        color: #6c757d;
    }
    
    .dealer-checkboxes::-webkit-scrollbar {
        width: 6px;
    }
    
    .dealer-checkboxes::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .dealer-checkboxes::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    .dealer-checkboxes::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    
    /* Responsive improvements */
    @media (max-width: 768px) {
        .dealer-checkboxes .col-md-6 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
</style>
@endsection

@section('javascripts')
<script>
    function deleteRole(id, name) {
        Swal.fire({
            title: 'Hapus Role?',
            text: `Anda akan menghapus role ${name}?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Create form and submit
                let form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ route("roleprivileges.delete", ":id") }}'.replace(':id', id);
                
                let csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '{{ csrf_token() }}';
                
                let methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'DELETE';
                
                form.appendChild(csrfToken);
                form.appendChild(methodField);
                document.body.appendChild(form);
                form.submit();
            }
        });
    }

    function editRole(id) {
        let url = '{{ route("roleprivileges.edit", ":id") }}'
            url = url.replace(':id', id);
        
        $.ajax({
            url: url,
            type: 'GET',
            success: function(res) {
                let url = '{{ route("roleprivileges.update", ":id") }}'
                    url = url.replace(':id', id);
                $("#roleEditModal").modal("show")
                $("#roleEditModal form").attr("action", url)
                $("#roleEditModal input[name='role']").val(res.role.name)

                let menuHtml = ''
                for(let i = 0; i < res.role_privileges.length; i++) {
                    const menu = res.role_privileges[i]
                    const isCreateChecked = menu.create == 1 ? "checked" : ""
                    const isUpdateChecked = menu.update == 1 ? "checked" : ""
                    const isDeleteChecked = menu.delete == 1 ? "checked" : ""
                    const isViewChecked = menu.view == 1 ? "checked" : ""
                    
                    if(menu.name == 'Admin Area' || menu.name == 'Mekanik Area') {
                        menuHtml += `
                            <h5>${menu.name}</h5>
                            <div class="row">
                                <input type="hidden" value="${menu.create}" name="privileges[${menu.menu_id}][create]">
                                <input type="hidden" value="${menu.update}" name="privileges[${menu.menu_id}][update]">
                                <input type="hidden" value="${menu.delete}" name="privileges[${menu.menu_id}][delete]">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isViewChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                        <input type="hidden" value="${menu.view}" name="privileges[${menu.menu_id}][view]">
                                    </div>
                                </div>
                            </div>
                            `
                    }else{
                        menuHtml += `
                            <h5>${menu.name}</h5>
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isCreateChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Create</label>
                                        <input type="hidden" value="${menu.create}" name="privileges[${menu.menu_id}][create]">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isUpdateChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Update</label>
                                        <input type="hidden" value="${menu.update}" name="privileges[${menu.menu_id}][update]">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isDeleteChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Delete</label>
                                        <input type="hidden" value="${menu.delete}" name="privileges[${menu.menu_id}][delete]">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isViewChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                        <input type="hidden" value="${menu.view}" name="privileges[${menu.menu_id}][view]">
                                    </div>
                                </div>
                            </div>
                            `
                    }
                }

                $("#roleEditModal #role-privilege-edit").html(`<div>${menuHtml}</div>`)
            }
        })
    }

    function assignDealer(roleId) {
        // Set form action
        let url = '{{ route("roleprivileges.assignDealer", ":id") }}'.replace(':id', roleId);
        $("#assignDealerForm").attr("action", url);
        
        // Reset checkboxes and counter
        $('.dealer-checkbox').prop('checked', false);
        updateSelectedCount();
        
        // Load existing assigned dealers
        $.ajax({
            url: '{{ route("roleprivileges.getAssignedDealers", ":id") }}'.replace(':id', roleId),
            type: 'GET',
            success: function(response) {
                if (response.assignedDealers) {
                    response.assignedDealers.forEach(function(dealerId) {
                        $(`#dealer_${dealerId}`).prop('checked', true);
                    });
                }
                updateSelectedCount();
            },
            error: function() {
                console.log('Error loading assigned dealers');
                updateSelectedCount();
            }
        });
        
        $("#assignDealerModal").modal("show");
    }

    function selectAllDealers() {
        $('.dealer-checkbox').prop('checked', true);
        updateSelectedCount();
    }

    function deselectAllDealers() {
        $('.dealer-checkbox').prop('checked', false);
        updateSelectedCount();
    }

    function updateSelectedCount() {
        const selectedCount = $('.dealer-checkbox:checked').length;
        $('#selectedCount').text(selectedCount);
        
        // Update submit button state
        if (selectedCount > 0) {
            $('#submitBtn').prop('disabled', false).removeClass('btn-secondary').addClass('btn-primary');
        } else {
            $('#submitBtn').prop('disabled', true).removeClass('btn-primary').addClass('btn-secondary');
        }
    }

    $(document).ready(function () {
        // Add event handlers for modal close buttons
        $('.close, [data-dismiss="modal"]').on("click", function () {
            $("#roleModal").modal("hide");
            $("#roleEditModal").modal("hide");
            $("#assignDealerModal").modal("hide");
        });

        // Also handle the "Close" button
        $('.btn-secondary[data-dismiss="modal"]').on("click", function () {
            $("#roleModal").modal("hide");
            $("#roleEditModal").modal("hide");
            $("#assignDealerModal").modal("hide");
        });

        // Event listener for dealer checkboxes
        $(document).on('change', '.dealer-checkbox', function() {
            updateSelectedCount();
        });

        // Handle form submission for assign dealer
        $("#assignDealerForm").on("submit", function(e) {
            e.preventDefault();
            
            // Validate if at least one dealer is selected
            const selectedDealers = $('.dealer-checkbox:checked').length;
            if (selectedDealers === 0) {
                Swal.fire({
                    title: 'Peringatan!',
                    text: 'Silakan pilih minimal satu dealer',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
                return;
            }
            
            // Disable submit button and show loading
            const submitBtn = $('#submitBtn');
            const originalText = submitBtn.html();
            submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Menyimpan...');
            
            let formData = new FormData(this);
            let url = $(this).attr("action");
            
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message || 'Terjadi kesalahan',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr) {
                    let message = 'Terjadi kesalahan';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    Swal.fire({
                        title: 'Error!',
                        text: message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                },
                complete: function() {
                    // Re-enable submit button
                    submitBtn.prop('disabled', false).html(originalText);
                }
            });
        });
    });
</script>
@endsection