@extends('admin_dashboard')
@section('admin')

<div class="content">
    <div class="container-fluid">
        <div class="page-title-box mb-2">
            <h4 class="page-title">Meeting Information</h4>
        </div>

        {{-- 🔹 Add / Update Form --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <form id="meetingForm">
                    @csrf
                    <input type="hidden" id="meeting_id">

                    <div class="row mb-2">
                        <div class="col-md-4">
                            <label>Meeting Type</label>
                            <select id="meeting_type_id" class="form-control" required>
                                <option value="">-- Select Type --</option>
                                @foreach($meetingTypes as $type)
                                <option value="{{ $type->id }}" data-target="{{ $type->target }}">
                                    {{ $type->meeting_type }} (Target: {{ $type->target }})
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label>Target</label>
                            <input type="text" id="target" class="form-control" readonly placeholder="Auto-filled">
                        </div>

                        <div class="col-md-4">
                            <label>Actualization Date</label>
                            <input type="date" id="actualization_date" class="form-control" required>
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <button type="submit" class="btn btn-success btn-sm" id="saveBtn">Save</button>
                        <button type="button" class="btn btn-secondary btn-sm" id="resetBtn">Reset</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- 🔹 Table --}}
        <div class="card shadow-sm">
            <div class="card-body table-responsive">
                <table class="table table-bordered align-middle text-center">
                    <thead class="table-light">
                        <tr>
                            <th>SL</th>
                            <th>Meeting Type</th>
                            <th>Target</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="meetingTableBody">
                        @foreach($meetings as $key => $m)
                        <tr id="row_{{ $m->id }}">
                            <td>{{ $key+1 }}</td>
                            <td class="type_name">{{ $m->type->meeting_type }}</td>
                            <td class="type_target">{{ $m->type->target }}</td>
                            <td class="date">{{ $m->actualization_date }}</td>
                            <td>
                                <button class="btn btn-warning btn-sm editBtn" data-id="{{ $m->id }}"
                                    data-type="{{ $m->type->id }}"
                                    data-date="{{ $m->actualization_date }}">Edit</button>
                                <button class="btn btn-danger btn-sm deleteBtn" data-id="{{ $m->id }}">Delete</button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

{{-- ✅ SweetAlert2 & jQuery --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {

    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 1600,
        timerProgressBar: true,
    });

    // 🟢 Auto-fill Target on select
    $('#meeting_type_id').on('change', function() {
        let target = $(this).find('option:selected').data('target') || '';
        $('#target').val(target);
    });

    // 🟢 Save or Update
    $('#meetingForm').on('submit', function(e) {
        e.preventDefault();

        let id = $('#meeting_id').val();
        let url = id ? `/meeting-info/update/${id}` : `/meeting-info/store`;
        let method = id ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            type: method,
            data: {
                _token: '{{ csrf_token() }}',
                meeting_type_id: $('#meeting_type_id').val(),
                actualization_date: $('#actualization_date').val(),
            },
            success: function(res) {
                let data = res.meeting;

                if (id) {
                    // 🔹 Update existing row
                    let row = $(`#row_${id}`);
                    row.find('.type_name').text(data.type.meeting_type);
                    row.find('.type_target').text(data.type.target);
                    row.find('.date').text(data.actualization_date);
                    row.find('.editBtn').attr('data-type', data.type.id)
                        .attr('data-date', data.actualization_date);
                    Toast.fire({
                        icon: 'success',
                        title: 'Updated successfully'
                    });
                } else {
                    // 🔹 Add new row to top
                    let row = `
                        <tr id="row_${data.id}">
                            <td>#</td>
                            <td class="type_name">${data.type.meeting_type}</td>
                            <td class="type_target">${data.type.target}</td>
                            <td class="date">${data.actualization_date}</td>
                            <td>
                                <button class="btn btn-warning btn-sm editBtn"
                                    data-id="${data.id}"
                                    data-type="${data.type.id}"
                                    data-date="${data.actualization_date}">Edit</button>
                                <button class="btn btn-danger btn-sm deleteBtn" data-id="${data.id}">Delete</button>
                            </td>
                        </tr>`;
                    $('#meetingTableBody').prepend(row);
                    Toast.fire({
                        icon: 'success',
                        title: 'Added successfully'
                    });
                }

                resetForm();
            },
            error: function() {
                Toast.fire({
                    icon: 'error',
                    title: 'Error saving data!'
                });
            }
        });
    });

    // 🟡 Edit Button
    $(document).on('click', '.editBtn', function() {
        let id = $(this).data('id');
        let typeId = $(this).data('type');
        let date = $(this).data('date');

        $('#meeting_id').val(id);
        $('#meeting_type_id').val(typeId).change();
        $('#actualization_date').val(date);
        $('#saveBtn').text('Update');
    });

    // 🔴 Delete Button
    $(document).on('click', '.deleteBtn', function() {
        let id = $(this).data('id');

        Swal.fire({
            title: 'Delete this record?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/meeting-info/delete/${id}`,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        if (res.success) {
                            $(`#row_${id}`).remove();
                            Toast.fire({
                                icon: 'success',
                                title: 'Deleted successfully'
                            });
                        }
                    },
                    error: function() {
                        Toast.fire({
                            icon: 'error',
                            title: 'Error deleting data!'
                        });
                    }
                });
            }
        });
    });

    // 🧹 Reset Button
    $('#resetBtn').click(function() {
        resetForm();
    });

    function resetForm() {
        $('#meetingForm')[0].reset();
        $('#meeting_id').val('');
        $('#saveBtn').text('Save');
    }

});
</script>
@endsection