{{-- resources/views/work_stations/index.blade.php --}}
@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    /* Keep action buttons compact */
    #work-stations-table td .btn-group .btn{
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Work Stations</h1>

    <div class="d-flex justify-content-end mb-3">
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createWorkStationModal">
            <i class="material-icons md-add"></i> Add Work Station
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="work-stations-table" class="table table-bordered table-striped w-100">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Station Name</th>
                    <th>Location</th>
                    <th>Created At</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===================== CREATE WORK STATION MODAL ===================== --}}
<div class="modal fade" id="createWorkStationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="createWorkStationForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">add</i> Add Work Station
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Station Name</label>
                            <input type="text" class="form-control" name="name" placeholder="e.g. Registration Desk" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Location</label>
                            <input type="text" class="form-control" name="location" placeholder="e.g. Block A, Floor 2">
                        </div>
                    </div>

                    <div class="alert alert-danger d-none mt-3" id="createWorkStationErrors"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ===================== VIEW WORK STATION MODAL ===================== --}}
<div class="modal fade" id="viewWorkStationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header text-white">
                <h5 class="modal-title">
                    <i class="material-icons me-2">visibility</i> View Work Station
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Station Name</label>
                        <input type="text" class="form-control" id="view_ws_name" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Location</label>
                        <textarea class="form-control" id="view_ws_location" rows="2" readonly></textarea>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- ===================== EDIT WORK STATION MODAL ===================== --}}
<div class="modal fade" id="editWorkStationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="editWorkStationForm" method="POST">
            @csrf
            @method('PUT')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">edit</i> Edit Work Station
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="edit_ws_id">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Station Name</label>
                            <input type="text" class="form-control" name="name" id="edit_ws_name" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Location</label>
                            <input type="text" class="form-control" name="location" id="edit_ws_location">
                        </div>
                    </div>

                    <div class="alert alert-danger d-none mt-3" id="editWorkStationErrors"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ===================== DELETE WORK STATION MODAL ===================== --}}
<div class="modal fade" id="deleteWorkStationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <form id="deleteWorkStationForm" method="POST">
            @csrf
            @method('DELETE')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">delete</i> Confirm Delete
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p class="mb-0">
                        Delete work station <strong id="delete_ws_name">—</strong>?
                    </p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(function () {

    const table = $('#work-stations-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("work-stations.index") }}',
        autoWidth: false,
        responsive: false,
        columns: [
            { data: 'DT_RowIndex', orderable:false, searchable:false },
            { data: 'name' },
            { data: 'location' },
            { data: 'created_at' },
            { data: 'action', orderable:false, searchable:false }
        ]
    });

    // ================= CREATE =================
    $('#createWorkStationModal').on('shown.bs.modal', function () {
        $('#createWorkStationErrors').addClass('d-none').html('');
    });

    $('#createWorkStationForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);
        $.ajax({
            url: '{{ route("work-stations.store") }}',
            method: 'POST',
            data: form.serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('createWorkStationModal')).hide();
                form[0].reset();
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#createWorkStationErrors').removeClass('d-none');
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    let html = '<ul class="mb-0">';
                    Object.values(xhr.responseJSON.errors).forEach(arr => arr.forEach(m => html += `<li>${m}</li>`));
                    html += '</ul>';
                    box.html(html);
                } else {
                    box.html('Something went wrong. Please try again.');
                }
            }
        });
    });

    // ================= EDIT SUBMIT =================
    $('#editWorkStationForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: 'POST', // spoof PUT
            data: form.serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('editWorkStationModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#editWorkStationErrors').removeClass('d-none');
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    let html = '<ul class="mb-0">';
                    Object.values(xhr.responseJSON.errors).forEach(arr => arr.forEach(m => html += `<li>${m}</li>`));
                    html += '</ul>';
                    box.html(html);
                } else {
                    box.html('Something went wrong. Please try again.');
                }
            }
        });
    });

    // ================= DELETE SUBMIT =================
    $('#deleteWorkStationForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: 'POST', // spoof DELETE
            data: form.serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('deleteWorkStationModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function () {
                alert('Failed to delete work station. Please try again.');
            }
        });
    });

});

/**
 * ✅ Onclick handlers (Brick-style)
 * These open Bootstrap modals and fill values using data-* attributes.
 */

function viewWorkStation(btn) {
    $('#view_ws_name').val(btn.dataset.name ?? '—');
    $('#view_ws_location').val(btn.dataset.location ?? '—');
    new bootstrap.Modal(document.getElementById('viewWorkStationModal')).show();
}

function editWorkStation(btn) {
    const id = btn.dataset.id;

    $('#edit_ws_id').val(id);
    $('#edit_ws_name').val(btn.dataset.name ?? '');
    $('#edit_ws_location').val(btn.dataset.location ?? '');

    $('#editWorkStationErrors').addClass('d-none').html('');
    $('#editWorkStationForm').attr('action', `/work-stations/${id}`);

    new bootstrap.Modal(document.getElementById('editWorkStationModal')).show();
}

function deleteWorkStation(btn) {
    const id = btn.dataset.id;
    const name = btn.dataset.name ?? 'this work station';

    $('#delete_ws_name').text(name);
    $('#deleteWorkStationForm').attr('action', `/work-stations/${id}`);

    new bootstrap.Modal(document.getElementById('deleteWorkStationModal')).show();
}
</script>
@endpush