@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
    <style>
        .select2-container .select2-selection--single {
            height: 48px;
        }

        .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
            line-height: 38px;
        }

        .select2-container--default
        .select2-selection--single
        .select2-selection__arrow {
            height: 38px;
        }
        /* .table th {
            text-align: center;
        }
        .table td {
            text-align: right;
        } */
    </style>
@endsection

@section('content')
    <div class="container-scroller">
        <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="main-panel">
            <div class="content-wrapper d-flex align-items-center auth px-0">
            <div class="row w-100 mx-0">
                <div class="col-lg-4 mx-auto">
                    <div class="auth-form-light text-left py-5 px-4 px-sm-5">
                    <h4 class="text-center fw-bold">All New Manufacture</h4>
                        <div class="card mb-0 h-auto">
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Plih Jenis Langganan yang akan di proses : </label> <!-- biar sejajar -->
                                    <select name="jenisLangganan[]" class="form-control js-example-basic-multiple" multiple="multiple">
                                        @foreach ($jenisLangganan as $jStiker )
                                            <option value="{{ $jStiker->id }}">{{ $jStiker->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Periode : </label>
                                    <div class="d-flex gap-2">
                                        <input type="date" class="form-control" id="tanggalMulai" name="tanggal_mulai">
                                        <input type="date" class="form-control" id="tanggalSelesai" name="tanggal_selesai">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="button" id="btnProses" class="btn btn-outline-secondary btn-lg btn-block">Proses</button>
                                </div>
                                <div id="progressBox" class="mt-3 d-none">
                                    <div class="progress">
                                        <div id="progressBar"
                                            class="progress-bar progress-bar-striped progress-bar-animated"
                                            role="progressbar"
                                            style="width: 0%">
                                        </div>
                                    </div>
                                    <small id="progressText" class="text-muted d-block mt-2">
                                        Memulai proses...
                                    </small>
                                </div>
                                <div id="alertSuccess" class="alert alert-success d-none" role="alert">
                                    <span class="alert-inner--icon">
                                        <i class="fe fe-thumbs-up"></i>
                                    </span>
                                    <span class="alert-inner--text">
                                        <strong>Success!</strong> Stiker berhasil diproses.
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
@endsection



@section('javascript')
    <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/select2.js') }}"></script>
    <script>
        $(document).ready(function () {

            $('#jenisLangganan').on('change', function () {
                const selected = $(this).val();
                console.log(selected);

                if (!selected || selected.length == 0) {
                    alert('Tidak ada yang dipilih');
                    return
                }

                $.ajax({
                    url: "{{ route('stiker-extend.show', 0) }}",
                    type: 'GET',
                    data: {
                        pilihannya : selected,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(res) {
                        console.log(res);
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                    }
                })
            });

            $('#modeTanggal').on('change', function () {
                const isRange = $(this).val() === 'range';

                $('#tanggalMulai').toggleClass('d-none', isRange);
                $('#tanggalSelesai').toggleClass('d-none', !isRange);
                console.log(isRange);
            });

            const now = new Date();

            // $('#tanggalSingle').val(formatDateTime(now));

            const startDay = new Date(now);
            // startDay.setHours(0,0,0,0);

            $('#tanggalMulai').val();
            $('#tanggalSelesai').val();

            $('#btnProses').on('click', function () {

                const jenisLangganan = $('#jenisLangganan').val();
                const mulai  = $('#tanggalMulai').val();
                const selesai = $('#tanggalSelesai').val();

                if (!jenisLangganan || jenisLangganan.length === 0) {
                    alert('Pilih minimal 1 jenis langganan');
                    return;
                }

                if (!mulai || !selesai) {
                    alert('Periode harus diisi');
                    return;
                }

                const btn = $(this);

                btn.prop('disabled', true).text('Memproses...');
                $('#alertSuccess').addClass('d-none');

                // 🔥 TAMPILKAN PROGRESS
                $('#progressBox').removeClass('d-none');
                setProgress(15, 'Menyiapkan data...');


                $.ajax({
                    url: "{{ route('stiker-extend.store') }}",
                    type: "POST",
                    data: {
                        jenis_langganan: jenisLangganan,
                        tanggal_mulai: mulai,
                        tanggal_selesai: selesai,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (res) {
                        setProgress(100, 'Proses selesai ✔️');

                        // ⏳ kasih jeda dikit biar user lihat 100%
                        setTimeout(function () {
                            $('#progressBox').addClass('d-none');
                            btn.prop('disabled', false).text('Proses');

                            $('#alertSuccess')
                                .removeClass('d-none')
                                .hide()
                                .fadeIn(300);
                        }, 700);
                        console.log(res);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
            });

            function setProgress(val, text) {
                $('#progressBar').css('width', val + '%');
                $('#progressText').text(text);
            }
        });
    </script>
@endsection