@extends('components.dashboard.layouts.master')

@section('title')
    {{ __('Make Qr') }}
@endsection

<!-- BEGIN: Content-->
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <x-dashboard.layouts.breadcrumb now="{{ __('Make Qr') }}">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.qr-codes.index') }}">
                        {{ __('qr_list') }}
                    </a>
                </li>
            </x-dashboard.layouts.breadcrumb>

            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('Make Qr') }}</h4>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger m-2">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li style="font-size: 14px;">{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="card-content">
                        <div class="card-body">
                            <form id="qrCodeForm" class="form form-vertical" method="POST" action="{{ route('admin.qr-codes.store') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <div class="form-group col-4">
                                        <label for="course_id">{{ __('Select Course') }}</label>
                                        <select class="form-control select2" name="course_id">
                                            @foreach($courses as $course)
                                                <option value="{{ $course->id }}">{{ $course->title }}</option>
                                            @endforeach
                                        </select>
                                        @error('course')
                                        <span class="text-danger" style="font-size: 12px;">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group col-2">
                                        <label for="count">{{ __('Count') }}</label>
                                        <input type="number" class="form-control" name="count" value="{{ old('count') }}" placeholder="{{ __('qr_numbers') }}">
                                        @error('count')
                                        <span class="text-danger" style="font-size: 12px;">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group col-3">
                                        <label for="start_date">{{ __('Start Date') }}</label>
                                        <input type="date" name="start_date" class="form-control" value="{{ old('start_date') }}">
                                        @error('start_date')
                                        <span class="text-danger" style="font-size: 12px;">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group col-3">
                                        <label for="end_date">{{ __('end_date') }}</label>
                                        <input type="date" name="end_date" class="form-control" value="{{ old('end_date') }}">
                                        @error('end_date')
                                        <span class="text-danger" style="font-size: 12px;">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <button id="submitQrCodeForm" type="submit" class="btn btn-primary">
                                            {{ __('Save') }}
                                        </button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                placeholder: "{{ __('select') }}"
            });
        });
        document.getElementById('qrCodeForm').addEventListener('submit', function (e) {
            let btn = document.getElementById('submitQrCodeForm');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
        });
    </script>
@endsection