@extends('layouts.master')

@section('content')

<div class="container-xxl">
    <x-breadcrumb listRoute="{{route('admin.packages.index')}}" model="Packages" item="Edit"></x-breadcrumb>
    <div class="card">
        <div class="card-body">
            <div class="d-flex" style="justify-content:space-between">
                @include('layouts._includes._package-navigation',["active"=>"gallery"])
            </div>
            <div class="table-responsive no-wrap">
                <table class="table" id="datatable">
                    <x-table.header :headers="['image','alt','Actions']" />
                    <tbody id="tablecontents"></tbody>
                </table>
            </div>
        </div>
    </div>
    <hr />

    @if($package->gallery_image()->count() < 5) <div class="card">
        <div class="card-header">
            <h5 class="modal-title">Add Gallery</h5>
            <small class="text-muted">Maximum 5 images allowed in gallery ({{ $package->gallery_image()->count() }}/5
                uploaded)</small>
        </div>
        <div class="card-body">
            <x-form.wrapper action="{{route('admin.packages.gallery.store', $package->id)}}" method="POST"
                enctype="multipart/form-data">
                <x-form.row>
                    <x-form.input :req="true" type="text" col="6" label="Alt" id="alt" name="alt" />
                    <x-form.input :req="true" type="text" col="6" label="Order" id="order" name="order" />
                </x-form.row>
                <x-form.row>
                    <div class="col-lg-12">
                        <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                            accept="image/*,video/*" onchange="previewThumb(this,'package-thumb')" />
                        <x-form.preview id="package-thumb" />
                    </div>
                    {{-- <div class="col-lg-12 mt-2">
                        <x-form.input type="text" label="YouTube URL (optional)" :req="false" id="link"
                            name="link" placeholder="https://youtube.com/..." />
                    </div> --}}
                </x-form.row>
                <x-form.button class="btn btn-sm btn-dark" type="submit" id="submit"><i class='bx bx-save bx-xs'></i>
                    Save</x-form.button>
            </x-form.wrapper>
        </div>
</div>
@else
<div class="card">
    <div class="card-body text-center">
        <div class="alert alert-warning">
            <i class='bx bx-warning-circle'></i>
            <strong>Gallery Full!</strong> Maximum of 5 images allowed. Please remove an existing image to add a new
            one.
        </div>
    </div>
</div>
@endif
</div>
@endsection
@push('custom_js')
@include('_helpers.row_reorder', ['url' => route('admin.packages.gallery.reorder',$package->id)])
@include('_helpers.ajax_form')
@include('_helpers.yajra',['url' => route("admin.packages.gallery.index",$package->id), 'columns' => $columns])
@include('_helpers.swal_delete')
@include('_helpers.image_preview', ['name' => 'image'])
@include('_helpers.status_change', ['url' => route('admin.packages.gallery.status',$package->id)])
<script>
    function toggleMediaInput() {
    const type = document.querySelector('input[name="media_type"]:checked').value;
    document.getElementById('image-input').style.display = type === 'image' ? '' : 'none';
    document.getElementById('youtube-input').style.display = type === 'youtube' ? '' : 'none';
    // Set required attribute accordingly
    document.getElementById('image').required = (type === 'image');
    document.getElementById('link').required = (type === 'youtube');
}
</script>
@endpush