@extends('backend.layouts.app')

@section('title') {{ __($module_action) }} {{ __($module_title) }} @endsection

@section('breadcrumbs')
<x-backend.breadcrumbs>
    <x-backend.breadcrumb-item type="active" icon='{{ $module_icon }}'>{{ __($module_title) }}</x-backend.breadcrumb-item>
</x-backend.breadcrumbs>
@endsection

@section('content')
<div class="card mb-4">
    <div class="card-body">
        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i> {{ __($module_title) }}
            <small class="text-muted">{{ __($module_action) }}</small>

            <x-slot name="subtitle">
                @lang(":module_name Management Dashboard", ['module_name'=>__(Str::title($module_name))])
            </x-slot>
            
            <x-slot name="toolbar">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#importModal">
                    @lang('Import CSV/Excel')
                </button>
                <br>
                <a href="{{ route('backend.companies.demo-sheet') }}">Download Demo Sheet</a><br>
                <a href="{{ route('backend.companies.destroy-all') }}">Delete All</a>
            </x-slot>
        </x-backend.section-header>

        <div class="row mt-4">
            <div class="col">
                <table id="datatable" class="table table-bordered table-hover table-responsive-sm">
                    <thead>
                        <tr>
                            <th>@lang('Name')</th>
                            <th>@lang('Email')</th>
                            <th>@lang('Mobile')</th>
                            <th class="text-end">@lang('Action')</th>
                        </tr>
                    </thead>
                
                    <tbody>
                        @foreach($$module_name as $module_name_singular)
                        <tr>
                            <td>{{ $module_name_singular->name }}</td>
                            <td>{{ $module_name_singular->email }}</td>
                            <td>{{ $module_name_singular->mobile }}</td>
                            <td class="text-end">
                                <!-- Show Button -->
                                <a href='{{ route("backend.{$module_name}.show", $module_name_singular) }}' 
                                   class='btn btn-sm btn-success' 
                                   data-toggle="tooltip" 
                                   title="@lang('Show')">
                                    <i class="fas fa-eye"></i>
                                </a>
                                
                                <!-- Edit Button -->
                                <a href='{{ route("backend.$module_name.edit", $module_name_singular) }}' 
                                   class='btn btn-sm btn-primary' 
                                   data-toggle="tooltip" 
                                   title="@lang('Edit')">
                                    <i class="fas fa-edit"></i>
                                </a>
                                
                                <!-- Delete Button with Confirmation -->
                                <form action='{{ route("backend.$module_name.destroy", $module_name_singular) }}' 
                                      method="POST" 
                                      class="d-inline-block" 
                                      onsubmit="return confirm('Are you sure you want to delete this?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class='btn btn-sm btn-danger' 
                                            data-toggle="tooltip" 
                                            title="@lang('Delete')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <div class="row">
            <div class="col-2">
                <div class="float-left">
                    @lang('Total') {{ $$module_name->total() }} {{ ucwords($module_name) }}
                </div>
            </div>
            <div class="col-10">
                <div class="float-end">
                    {!! $$module_name->render() !!}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="importModalLabel">@lang('Import CSV/Excel')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="import-form" action="{{ route('backend.companies.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="file" class="form-label">@lang('Choose a file to upload')</label>
                        <input type="file" name="file" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-primary">@lang('Upload')</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="upload-status-dialog" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1055; display: none; width: 300px;">
    <div class="toast show">
        <div class="toast-header">
            <strong class="me-auto">@lang('Upload Progress')</strong>
            <button type="button" class="btn-close" onclick="closeUploadStatusDialog()" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="upload-progress-bar" style="width: 0%;"></div>
            </div>
            <small id="upload-status-text">@lang('Uploading...')</small>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const uploadModal = document.getElementById('importModal');
        const uploadStatusDialog = document.getElementById('upload-status-dialog');
        const progressBar = document.getElementById('upload-progress-bar');
        const statusText = document.getElementById('upload-status-text');

        document.body.addEventListener('submit', function(event) {
            const form = event.target;

            if (form.id === 'import-form') {
                event.preventDefault();

                const formData = new FormData(form);

                // Close the modal
                const modalElement = document.getElementById('importModal');
                const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
                modal.hide();

                // Explicitly remove the modal backdrop
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) {
                    backdrop.remove();
                }

                // Reset body styles
                document.body.classList.remove('modal-open');
                document.body.style.overflow = '';
                document.body.style.paddingRight = '';

                // Show the upload status dialog
                uploadStatusDialog.style.display = 'block';

                fetch(form.action, {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    progressBar.style.width = '100%';
                    progressBar.classList.remove('bg-danger');
                    progressBar.classList.add('bg-success');
                    statusText.innerText = '@lang("Upload Complete!")';

                    setTimeout(() => {
                        uploadStatusDialog.style.display = 'none';
                    }, 3000);
                    location.reload();
                })
                .catch(error => {
                    progressBar.style.width = '100%';
                    progressBar.classList.add('bg-danger');
                    statusText.innerText = '@lang("Upload Failed! Please check the file format or try again.")';
                    console.error(error);
                });

                simulateUploadProgress(progressBar);
            }
        });
    });

    function simulateUploadProgress(progressBar) {
        let progress = 0;
        const interval = setInterval(() => {
            progress += 10;
            progressBar.style.width = progress + '%';
            if (progress >= 90) {
                clearInterval(interval);
            }
        }, 500);
    }

    function closeUploadStatusDialog() {
        document.getElementById('upload-status-dialog').style.display = 'none';
    }
</script>
@endpush