@extends("template.master")

@section("content")
    @if ($canCreate)
        <x-primary-button class="mb-4" id="btn-tambah-preventive-maintenance">Tambah Preventive Maintenance</x-primary-button>
    @endif
    <div class="card">
        <div class="card-body">
            <table class="table table-striped data-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Unit</th>
                        <th>Hour Meter</th>
                        <th>Sparepart</th>
                        <th>Deskripsi</th>
                        <th width="105px">Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="modalTambahPM" tabindex="-1" aria-labelledby="modalTambahPMLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="{{ route('preventive-maintenance.store') }}" method="POST" id="form-tambah-pm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTambahPMLabel">Tambah PM / PREVENTIVE MAINTENANCE</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">

                        {{-- Unit --}}
                        <div class="mb-3">
                            <label for="unit-id" class="form-label">Kode Unit</label>
                            <select class="form-select @error('unit_id') is-invalid @enderror" id="unit-id" name="unit_id"
                                required>
                                <option value="">-- Pilih Unit --</option>
                                @foreach ($units as $unit)
                                    <option value="{{ $unit->id }}">{{ $unit->unit_code }}</option>
                                @endforeach
                            </select>
                            @error('unit_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Hour Meter --}}
                        <div class="mb-3">
                            <label for="hour-meter" class="form-label">Hour Meter</label>
                            <input type="number" class="form-control @error('hour_meter') is-invalid @enderror"
                                id="hour-meter" name="hour_meter" placeholder="Hour Meter" required>
                            @error('hour_meter')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Deskripsi --}}
                        <div class="mb-3">
                            <label for="description" class="form-label">Deskripsi</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description"
                                name="description" rows="3" placeholder="Deskripsi"></textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- tanggal --}}
                        <div class="mb-3">
                            <label for="date" class="form-label">Tanggal</label>
                            <input type="date" class="form-control @error('date') is-invalid @enderror" id="date"
                                name="date" rows="3" placeholder="Deskripsi">
                            @error('date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        {{-- Dynamic Sparepart --}}
                        <div class="mb-3">
                            <label class="form-label">Sparepart</label>
                            <div id="sparepart-wrapper">
                                <div class="row mb-2 sparepart-item">
                                    <div class="col-md-5">
                                        <select class="form-select" name="spareparts[0][sparepart_id]" required>
                                            <option value="">-- Sparepart --</option>
                                            @foreach ($spareparts as $sparepart)
                                                <option value="{{ $sparepart->id }}">{{ $sparepart->part_number_1 }} -
                                                    {{ $sparepart->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="number" class="form-control" name="spareparts[0][qty]"
                                            placeholder="Quantity" required>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger btn-remove-sparepart"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-sm mt-2" id="btn-add-sparepart">Tambah</button>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalEdit" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form method="POST" id="form-edit-pm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit-id" name="id">

                    <div class="modal-header">
                        <h5 class="modal-title" id="modalEditLabel">Edit Preventive Maintenance</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">

                        {{-- Unit --}}
                        <div class="mb-3">
                            <label for="edit-unit-id" class="form-label">Kode Unit</label>
                            <select class="form-select" id="edit-unit-id" name="unit_id" required>
                                <option value="">-- Pilih Unit --</option>
                                @foreach ($units as $unit)
                                    <option value="{{ $unit->id }}">{{ $unit->unit_code }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Hour Meter --}}
                        <div class="mb-3">
                            <label for="edit-hour-meter" class="form-label">Hour Meter</label>
                            <input type="number" class="form-control" id="edit-hour-meter" name="hour_meter" required>
                        </div>

                        {{-- Deskripsi --}}
                        <div class="mb-3">
                            <label for="edit-description" class="form-label">Deskripsi</label>
                            <textarea class="form-control" id="edit-description" name="description" rows="3"></textarea>
                        </div>

                        {{-- Tanggal --}}
                        <div class="mb-3">
                            <label for="edit-date" class="form-label">Tanggal</label>
                            <input type="date" class="form-control" id="edit-date" name="date" required>
                        </div>

                        {{-- Dynamic Sparepart --}}
                        <div class="mb-3">
                            <label class="form-label">Sparepart</label>
                            <div id="sparepart-wrapper-edit"></div>
                            <button type="button" class="btn btn-primary btn-sm mt-2"
                                id="btn-sparepart-edit">Tambah</button>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        const masterSpareparts = @json($spareparts);
    </script>

@endsection

@push("extraJS")
    <script>
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: '{{ session('success') }}',
                showConfirmButton: false,
                timer: 2000
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: '{{ session('error') }}'
            });
        @endif

            @if ($errors->any())
                const modal = new bootstrap.Modal(document.getElementById('modalTambahpakeoli'));
                modal.show();
            @endif
        // Hapus sparepart dari form edit
        $(document).on('click', '#sparepart-wrapper-edit .btn-remove-sparepart', function () {
            $(this).closest('.sparepart-item').remove();
            reindexSparepartsEdit();
        });

        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('preventive-maintenance.index') }}",
                columnDefs: [
                    { width: "50px", targets: 0 }
                ],
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center',
                        orderable: false,
                        searchable: false
                    },
                    { data: 'unit', name: 'unit' },
                    { data: 'hour_meter', name: 'hour_meter' },
                    { data: 'spareparts', name: 'spareparts' },
                    { data: 'description', name: 'description' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });
        });

        $(document).ready(function () {
            $('#btn-tambah-preventive-maintenance').on('click', function () {
                $('#modalTambahPM').modal('show');
                clearFormErrors('#form-tambah-pm');
            });
        });

        let sparepartIndex = 1;

        $('#btn-add-sparepart').on('click', function () {
            let html = `
                        <div class="row mb-2 sparepart-item">
                            <div class="col-md-5">
                                <select class="form-select" required>
                                    <option value="">-- Sparepart --</option>
                                    @foreach ($spareparts as $sparepart)
                                        <option value="{{ $sparepart->id }}">{{ $sparepart->part_number_1 }} - {{ $sparepart->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <input type="number" class="form-control" placeholder="Quantity" required>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger btn-remove-sparepart"><i class="fa fa-trash"></i></button>
                            </div>
                        </div>`;
            $('#sparepart-wrapper').append(html);

            reindexSpareparts();
        });

        function reindexSpareparts() {
            $('#sparepart-wrapper .sparepart-item').each(function (index) {
                $(this).find('select').attr('name', `spareparts[${index}][sparepart_id]`);
                $(this).find('input').attr('name', `spareparts[${index}][qty]`);
            });
        }


        $(document).on('click', '.btn-remove-sparepart', function () {
            $(this).closest('.sparepart-item').remove();
            reindexSpareparts();
        });


        $('#form-tambah-pm').on("submit", function (e) {
            e.preventDefault();

            let formData = $(this).serialize();
            console.log(formData);
            $.ajax({
                url: "{{ route('preventive-maintenance.store') }}",
                type: "POST",
                data: formData,
                success: function (res) {
                    $('#modalTambahPM').modal('hide');
                    $('.data-table').DataTable().ajax.reload();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: 'Data Preventive Maintenance berhasil ditambahkan',
                        timer: 2000,
                        showConfirmButton: false
                    });

                    // Reset form
                    $('#form-tambah-pm')[0].reset();
                },
                error: function (xhr) {
                    handleValidationErrors(xhr, $('#form-tambah-pm'));

                    let response = xhr.responseJSON;
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: response?.message || 'Data tidak valid.'
                    });
                }
            });
        });

        const routeShowPM = "{{ route('pm-show', ':id') }}";
        const routeUpdatePM = "{{ route('preventive-maintenance.update', ':id') }}";

        $(document).on('click', '.edit', function () {
            let id = $(this).data('id');
            let url = routeShowPM.replace(':id', id);
            $.get(url, function (res) {
                console.log(res);
                $('#edit-id').val(res.id);
                $('#edit-unit-id').val(res.unit_id);
                $('#edit-hour-meter').val(res.hour_meter);
                $('#edit-description').val(res.description);
                $('#edit-date').val(res.date);

                $('#sparepart-wrapper-edit').empty();

                res.spareparts.forEach(function (item, index) {
                    let html = `
                                <div class="row mb-2 sparepart-item">
                                    <div class="col-md-5">
                                        <select class="form-select" name="spareparts[${index}][sparepart_id]" required>
                                            <option value="">-- Sparepart --</option>
                                            ${masterSpareparts.map(sp => `
                                                <option value="${sp.id}" ${sp.id == item.sparepart_id ? 'selected' : ''}>
                                                    ${sp.part_number_1} - ${sp.name}
                                                </option>`).join('')}
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="number" class="form-control" name="spareparts[${index}][qty]" value="${item.qty}" required>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger btn-remove-sparepart"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>`;
                    $('#sparepart-wrapper-edit').append(html);
                });

                $('#modalEdit').modal('show');
            });
        });

       // Tombol tambah sparepart pada form edit
        $('#btn-sparepart-edit').on('click', function () {
            let index = $('#sparepart-wrapper-edit .sparepart-item').length;

            let html = `
                <div class="row mb-2 sparepart-item">
                    <div class="col-md-5">
                        <select class="form-select" name="spareparts[${index}][sparepart_id]" required>
                            <option value="">-- Sparepart --</option>
                            ${masterSpareparts.map(sp => `
                                <option value="${sp.id}">
                                    ${sp.part_number_1} - ${sp.name}
                                </option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="number" class="form-control" name="spareparts[${index}][qty]" placeholder="Quantity" required>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger btn-remove-sparepart"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
            `;
            $('#sparepart-wrapper-edit').append(html);
        });

        // Re-index sparepart form-edit
        function reindexSparepartsEdit() {
            $('#sparepart-wrapper-edit .sparepart-item').each(function (index) {
                $(this).find('select').attr('name', `spareparts[${index}][sparepart_id]`);
                $(this).find('input').attr('name', `spareparts[${index}][qty]`);
            });
        }

        // Tombol hapus sparepart pada form edit
        $(document).on('click', '#sparepart-wrapper-edit .btn-remove-sparepart', function () {
            $(this).closest('.sparepart-item').remove();
            reindexSparepartsEdit();
        });

        $('#form-edit-pm').on("submit", function (e) {
            e.preventDefault();

            let id = $('#edit-id').val(); // Ambil ID dari hidden input
            let url = routeUpdatePM.replace(':id', id); // Ganti placeholder dengan ID-nya

            let formData = $(this).serialize();
            console.log(formData);

            $.ajax({
                url: url,
                type: "PUT",
                data: formData,
                success: function (res) {
                    $('#modalEdit').modal('hide');
                    $('.data-table').DataTable().ajax.reload();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: res.message || 'Data Preventive Maintenance berhasil diperbarui',
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function (xhr) {
                    handleValidationErrors(xhr, $('#form-edit-pm'));

                    let response = xhr.responseJSON;
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: response?.message || 'Data tidak valid.'
                    });
                }
            });
        });

        let routeDeleteLocation = "{{ route('preventive-maintenance.destroy', ':id') }}";

        $(document).on('click', '.delete', function () {
            let id = $(this).data('id');

            Swal.fire({
                title: 'Yakin ingin menghapus lokasi ini?',
                text: "Data tidak dapat dikembalikan setelah dihapus.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e3342f',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    const deleteUrl = routeDeleteLocation.replace(':id', id);

                    $.ajax({
                        url: deleteUrl,
                        type: 'POST',
                        data: {
                            _method: 'DELETE',
                            _token: '{{ csrf_token() }}'
                        },
                        success: function () {
                            $('.data-table').DataTable().ajax.reload();
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil!',
                                text: 'Lokasi berhasil dihapus',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        },
                        error: function (xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal!',
                                text: xhr.responseJSON?.message ?? 'Data tidak bisa dihapus karena sedang digunakan.'
                            });
                        }
                    });
                }
            });
        });

        function clearFormErrors(formSelector) {
            $(formSelector).find('.is-invalid').removeClass('is-invalid');
            $(formSelector).find('.invalid-feedback').remove();
        }

        function handleValidationErrors(xhr, form) {
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                console.log(errors);
                for (let field in errors) {
                    let input = form.find(`[name="${field}"]`);
                    if (input.length === 0 && field.includes('.')) {
                        // For array fields like roles[0]
                        let nameAttr = field.replace(/\.\d+/, '[]');
                        input = form.find(`[name="${nameAttr}"]`);
                    }
                    input.addClass('is-invalid');
                    input.after(`<div class="invalid-feedback d-block">${errors[field][0]}</div>`);
                }
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'Terjadi kesalahan pada server.'
                });
            }
        }
    </script>
@endpush