@extends('layouts.admin.base-dashboard')
@section('title', 'Barbershop Services')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5>List Service</h5>
        <button class="btn btn-success" id="addService">Add</button>
    </div>
    <div class="card-body">
        <table class="table table-bordered" id="serviceTable">
            <thead class="table-light">
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Branch</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="serviceModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="serviceForm">
            @csrf
            <input type="hidden" id="service_id">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalTitle">Tambah Layanan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" style="color:white;">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="name">Nama Layanan</label>
                        <input type="text" name="name" id="name" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="price">Harga</label>
                        <input type="number" name="price" id="price" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="branch_id">Cabang (Opsional)</label>
                        <select name="branch_id" id="branch_id" class="form-control">
                            <option value="">-- Pilih Cabang --</option>
                            @foreach ($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
                <div class="modal-footer bg-light">
                    <button type="submit" class="btn btn-success">Simpan</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
<script>
$(function () {
    let table = $('#serviceTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("barbershop-services.index") }}',
        columns: [
            { data: 'name', name: 'name' },
            { data: 'price', name: 'price', render: data => 'Rp' + parseInt(data).toLocaleString() },
            { data: 'branch', name: 'branch' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });

    // Tambah
    $('#addService').click(function () {
        $('#serviceForm')[0].reset();
        $('#service_id').val('');
        $('#branch_id').val('').trigger('change');
        $('#modalTitle').text('Tambah Layanan');
        $('#serviceModal').modal('show');
    });

    // Edit
    $(document).on('click', '.editService', function () {
        let id = $(this).data('id');
        $.get("{{ url('barbershop-services/edit') }}/" + id, function (data) {
            $('#service_id').val(data.id);
            $('#name').val(data.name);
            $('#price').val(data.price);
            $('#branch_id').val(data.branch_id).trigger('change');
            $('#modalTitle').text('Edit Layanan');
            $('#serviceModal').modal('show');
        });
    });

    // Simpan / Update
    $('#serviceForm').submit(function (e) {
        e.preventDefault();
        let id = $('#service_id').val();
        let url = id
            ? "{{ url('barbershop-services/update') }}/" + id
            : "{{ route('barbershop-services.store') }}";
        let method = id ? 'PATCH' : 'POST';

        $.ajax({
            url: url,
            type: method,
            data: $('#serviceForm').serialize(),
            success: function () {
                $('#serviceModal').modal('hide');
                table.ajax.reload();
            },
            error: function (xhr) {
                alert('Gagal menyimpan data: ' + xhr.responseJSON.message);
            }
        });
    });

    // Hapus
    $(document).on('click', '.deleteService', function () {
        let id = $(this).data('id');
        if (confirm('Yakin ingin menghapus layanan ini?')) {
            $.ajax({
                url: "{{ url('barbershop-services/delete') }}/" + id,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function () {
                    table.ajax.reload();
                }
            });
        }
    });

    $('#branch_id').select2({ placeholder: '-- Pilih Cabang --', allowClear: true, width: '100%' });
});
</script>
@endpush