@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_Work_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-body mt-0 pt-2">
            {{-- Add Workarea Form --}}
            <form id="modelAreaForm">
                @csrf
                <div class="row mb-3 justify-content-center">
                    <div class="col-md-6">
                        <label for="workarea_name" class="form-label fw-bold">@lang('words.workarea')</label>
                        <input type="text" class="form-control form-control-lg" id="workarea_name" name="workarea_name"
                            placeholder="@lang('words.workarea')" 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.action')</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($workAreas as $workArea)
                    <tr>
                     
                        <td class="text-sm text-center">{{ $workArea->workarea_name }}</td>
                       <td class="text-sm text-center">
                            <button class="btn btn-sm btn-success me-2 editBtn"
                                data-id="{{ $workArea->id }}"
                                data-name="{{ $workArea->workarea_name }}">
                                <i class="fas fa-edit"></i>
                            </button>

                            <button class="btn btn-sm btn-danger deleteBtn"
                                data-id="{{ $workArea->id }}">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center text-muted">@lang('words.no_records_found')</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>

        </div>
    </div>
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="editModelAreaForm">
            @csrf
            <input type="hidden" id="edit_workarea_id" name="id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">@lang('words.edit_workarea')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">@lang('words.workarea')</label>
                        <input type="text" class="form-control" id="edit_workarea_name" name="workarea_name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">@lang('words.update')</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('words.close')</button>
                </div>
            </div>
        </form>
    </div>
</div>

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

<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')
        }
    });

    

    // Add Workarea - AJAX form submit
    $(document).ready(function () {
        $('#modelAreaForm').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                url: '{{ route("modelworkstore") }}',
                type: 'POST',
                data: $(this).serialize(),
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message,
                        confirmButtonColor: '#28a745'
                    });
                    $('#modelAreaForm')[0].reset();
                     
                },
                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 () {
    const modelAreaTable = $('#modelAreaTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true
    });

    // Handle Edit Button
    $('#modelAreaTable').on('click', '.editBtn', function () {
        let id = $(this).data('id');
        let name = $(this).data('name');

        Swal.fire({
            title: 'Edit Workarea',
            input: 'text',
            inputValue: name,
            showCancelButton: true,
            confirmButtonText: 'Update',
            showLoaderOnConfirm: true,
            preConfirm: (newName) => {
                return $.ajax({
                    url: '/modelworkarea/update/' + id,
                    type: 'POST',
                    data: {
                        workarea_name: newName,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }
                }).fail(xhr => {
                    Swal.showValidationMessage(
                        xhr.responseJSON?.message || 'Request failed'
                    );
                });
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire('Updated!', 'Workarea updated successfully.', 'success').then(() => {
                    location.reload();
                });
            }
        });
    });

    // Handle Delete Button
    $('#modelAreaTable').on('click', '.deleteBtn', function () {
        let id = $(this).data('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: '/modelworkarea/delete/' + id,
                    type: 'DELETE',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') },
                    success: function () {
                        Swal.fire('@lang('words.deleted')', '@lang('words.modelareadeleted')', 'success').then(() => {
                            location.reload();
                        });
                    },
                    error: function () {
                        Swal.fire('@lang('words.err')', '@lang('words.faileddeletema')', 'error');
                    }
                });
            }
        });
    });

});

</script>

@endsection