@extends('layouts.app')

@section('content')
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-1 shadow-none border-radius-xl mt-0 bg-primary">
        <div class="container-fluid py-1 px-3">
            @include('layouts.navbars.auth.topnav', ['title' => trans('words.New_Model_Area')])
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <ul class="navbar-nav justify-content-end ms-md-auto pe-md-3 d-flex align-items-center">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    @if(auth()->user()->id != 1)
                        <li class="nav-item px-3 d-flex align-items-center">
                            <a href="#" onclick='profileSetting({{ auth()->user()->id }});'>
                                <i class="fa fa-user me-sm-0" style="color: white;"></i>
                            </a>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid py-1 d-flex justify-content-center align-items-start" style="min-height: calc(100vh - 70px);">
        <div class="card mt-0 pt-0" style="min-width: 1230px;" id="basic-info">

            <!-- <div class="card-header mt-0 pt-2">
                <h5 class="mb-0 text-dark">@lang('words.New_Model_Area')</h5>
            </div> -->

            <div class="card-body mt-0 pt-2">
                <form id="modelAreaForm">
                    @csrf
                    <div class="row mb-3 justify-content-center">
                        <div class="col-md-6">
                            <label for="workarea_id" class="form-label fw-bold">@lang('words.work_area')</label>
                            <select class="form-select form-select-lg" id="workarea_id" name="workarea_id" required>
                                <option value="" disabled selected>@lang('words.work_area')</option>
                                @foreach ($workAreas as $workArea)
                                    <option value="{{ $workArea->id }}">{{ $workArea->workarea_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="model_area_name" class="form-label fw-bold">@lang('words.modelarea')</label>
                            <input type="text" class="form-control form-control-lg" id="model_area_name" name="model_area_name"
                                   placeholder="@lang('words.modelarea')" required style="height: 40px;">
                        </div>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-success px-4 py-2">@lang('words.create')</button>
                    </div>
                </form>

              <div style="max-height: 400px; overflow-y: auto; width: 100%;">
                    <table class="table table-bordered table-striped" id="modelAreaTable" style="width:100%;">
                        <thead class="bg-dark text-white">
                            <tr>
                                <th class="text-sm text-center">@lang('words.workarea')</th>
                                <th class="text-sm text-center">@lang('words.modelarea')</th>
                                <th class="text-sm text-center">@lang('words.action')</th>
                            </tr>
                        </thead>
                        <tbody id="modelAreaTableBody" class="text-center">
                            <!-- Rows will be injected here -->
                        </tbody>
                    </table>
                </div>
                
            </div>

        </div>
    </div>

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
    <script src="/assets/js/plugins/choices.min.js"></script>
    <script src="/assets/js/core/jquery.min.js"></script>
	<script src="/assets/js/plugins/sweetalert.min.js"></script>

    <script>

    
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        $(document).ready(function () {
            $('#modelAreaForm').on('submit', function (e) {
                e.preventDefault();

                $.ajax({
                    url: '{{ route("model_area.store") }}',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: response.message,
                            confirmButtonColor: '#28a745'
                        });
                        $('#modelAreaForm')[0].reset();
                        $('#assignedModelAreas').html('');
                    },
                    error: function (xhr) {
                        let errorMsg = '@lang('words.duplicateentry')';
                        let icon = 'info';
                        let title = '@lang('words.duplicate')';

                        if (xhr.status === 422) {
                            icon = 'info';
                            title = '@lang('words.notice')';
                            errorMsg = xhr.responseJSON?.message || 'Validation error.';
                        } else if (xhr.responseJSON?.errors) {
                            errorMsg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                        }

                        Swal.fire({
                            icon: icon,
                            title: title,
                            text: errorMsg,
                            confirmButtonColor: '#dc3545'
                        });
                    }
                });
            });

            $(document).ready(function () {
                // Initialize DataTable only once
                const modelAreaTable = $('#modelAreaTable').DataTable({
                    paging: true,
                    pageLength: 5,
                    searching: true,
                    ordering: true,
                    info: true
                });

                $('#workarea_id').on('change', function () {
                    var workareaId = $(this).val();

                    $.ajax({
                        url: '{{ route("model_area.get_by_workarea") }}',
                        type: 'GET',
                        data: { workarea_id: workareaId },
                        success: function (response) {
                            // Clear old rows
                            modelAreaTable.clear();

                             if (response.modelarea && response.modelarea.length > 0) {
                                response.modelarea.forEach(function (item) {
                                    modelAreaTable.row.add([
                                        `<div class = "text-center">${item.workarea_name}</div>`,
                                        `<div class = "text-center">${item.modelarea_name}</div>`,
                                        `
                                        <div class="text-center">
                                            <button class="btn btn-sm btn-success me-2" onclick="editModelArea(${item.id}, '${item.modelarea_name}')">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-danger" onclick="deleteModelArea(${item.id})">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                        `
                                    ]);
                                });
                                modelAreaTable.draw();
                            } else {
                                $('#modelAreaTableBody').html(`
                                    <tr>
                                        <td colspan="3" class="text-muted text-center">@lang('words.nomodelareaassigned')</td>
                                    </tr>
                                `);
                            }
                        },
                        error: function () {
                            $('#modelAreaTableBody').html(`
                                <tr>
                                    <td colspan="3" class="text-danger text-center">@lang('words.failedtoloadmodelareas')</td>
                                </tr>
                            `);
                        }
                    });
                });
            });

        });

        function editModelArea(id, modelarea_name) {
            Swal.fire({
                title: '@lang('words.editmodelarea')',
                input: 'text',
                inputValue: modelarea_name,
                showCancelButton: true,
                confirmButtonText: '@lang('words.update')',
                showLoaderOnConfirm: true,
                preConfirm: (newName) => {
                    return $.ajax({
                        url: '/model-areas/' + id,
                        type: 'PUT',
                        data: {
                            name: newName,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire('@lang('words.updated')', '@lang('words.modelareaupdated')', 'success');
                    $('#workarea_id').trigger('change'); // reload list
                }
            }).catch(() => {
                Swal.fire('@lang('words.err')', '@lang('words.failedtoupdate')', 'error');
            });
        }

        function deleteModelArea(id) {
            Swal.fire({
                title: '@lang('words.sure')',
                text: '@lang('words.deletemsg')',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: '@lang('words.yesdelete')'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/model-areas/' + id,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function () {
                            Swal.fire('@lang('words.deleted')', '@lang('words.modelareadeleted')', 'success');
                            $('#workarea_id').trigger('change'); // reload list
                        },
                        error: function () {
                            Swal.fire('@lang('words.err')', '@lang('words.faileddeletema')', 'error');
                        }
                    });
                }
            });
        }
    </script>
    <style>
    #assignedModelAreas1 div::-webkit-scrollbar {
        width: 6px;
    }

    #assignedModelAreas1 div::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #assignedModelAreas1 div::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    #assignedModelAreas1 div::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
</style>

@endsection