@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
<style>
    .menu-card {
        transition: all 0.3s ease;
        border-radius: 10px;
        overflow: hidden;
    }

    .menu-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    }

    .card-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .select2-container {
        width: 100% !important;
    }

    .form-select {
        padding: 0.5rem 1rem;
    }
</style>
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="{{ $dmenu }}-save"
                                onclick="event.preventDefault(); confirmSave();">
                                <i class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                        id="{{ $dmenu }}-form">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            {{-- Header Section --}}
                            <div class="card mb-4">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label">Katering</label>
                                                <select name="katering_id" class="form-select" required>
                                                    <option value="">Pilih Katering</option>
                                                    @foreach ($katerings as $katering)
                                                        <option value="{{ $katering->id_catering }}"
                                                            {{ $menuPlan->id_catering == $katering->id_catering ? 'selected' : '' }}>
                                                            {{ $katering->nama_catering }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label">Tanggal</label>
                                                <input type="date" name="tanggal" class="form-control"
                                                    value="{{ $menuPlan->tanggal }}" required readonly>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label">Hari</label>
                                                <input type="text" name="hari" class="form-control"
                                                    value="{{ $menuPlan->hari }}" required readonly>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label">Shift</label>
                                                <input type="number" name="shift" class="form-control"
                                                    value="{{ $menuPlan->shift }}" required min="1" max="3"
                                                    readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Menu Section --}}
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        @for ($i = 1; $i <= 5; $i++)
                                            <div class="col-md-4 mb-4">
                                                <div class="card menu-card h-100 shadow-sm">
                                                    <div class="card-header bg-light py-3">
                                                        <h6 class="mb-0">Menu {{ $i }}</h6>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="form-group mb-3">
                                                            <label class="form-label">Pilih Menu</label>
                                                            <select name="menu{{ $i }}_id"
                                                                class="form-select custom-select menu-select">
                                                                <option value="">Pilih Menu</option>
                                                                @foreach ($menus as $menu)
                                                                    <option value="{{ $menu->id_menu_utama }}"
                                                                        {{ $menuPlan->{"id_menu_utama_$i"} == $menu->id_menu_utama ? 'selected' : '' }}>
                                                                        {{ $menu->menu_utama }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function confirmSave() {
            Swal.fire({
                title: 'Simpan Data?',
                text: "Apakah Anda yakin ingin menyimpan perubahan data ini?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('{{ $dmenu }}-form').submit();
                }
            });
        }
    </script>
@endsection