@extends('layouts.admin-panel')

@section('head')
    @include('admin-panel/includes/head')
    @include('admin-panel/includes/addHead')
@stop

@section('nav')
    @include('admin-panel/includes/navbar')
@stop

@section('content')

    @include('admin-panel/includes/sidebar')

    <!-- Main content -->
    <div class="content-wrapper">

        @include('admin-panel/includes/header')

        <!-- Content area -->
        <div class="content">

            <div class="row">
                <div class="col-md-12">

                    <div class="card">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        <div class="card-header header-elements-inline">
                            <h5 class="card-title">Studio abunəliyi — ödənişsiz ver</h5>
                            <div class="header-elements">
                                <a href="{{route('displayStudioSubscription')}}" class="btn btn-light btn-sm">
                                    <i class="icon-list mr-1"></i> Bütün abunəliklər
                                </a>
                            </div>
                        </div>

                        <div class="card-body">
                            <form action="{{route('addStudioSubscriptionApi')}}" method="POST">
                                @csrf

                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        @foreach ($errors->all() as $error)
                                            <div>{{$error}}</div>
                                        @endforeach
                                    </div>
                                @endif

                                <div class="form-group">
                                    <label>İstifadəçi:</label>
                                    <select name="user_id" id="userSelect" class="form-control" required></select>
                                    <span class="form-text text-muted">Ad, nickname və ya email ilə axtarın.</span>
                                </div>

                                <div class="form-group">
                                    <label>Plan:</label>
                                    <select name="plan" class="form-control" required>
                                        <option value="premium" {{old('plan') == 'premium' ? 'selected' : ''}}>Premium</option>
                                        <option value="ultimate" {{old('plan') == 'ultimate' ? 'selected' : ''}}>Ultimate</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Müddət:</label>
                                    <select name="duration" id="durationSelect" class="form-control" required>
                                        <option value="1" {{old('duration') == '1' ? 'selected' : ''}}>1 ay</option>
                                        <option value="3" {{old('duration') == '3' ? 'selected' : ''}}>3 ay</option>
                                        <option value="6" {{old('duration') == '6' ? 'selected' : ''}}>6 ay</option>
                                        <option value="12" {{old('duration') == '12' ? 'selected' : ''}}>12 ay</option>
                                        <option value="unlimited" {{old('duration') == 'unlimited' ? 'selected' : ''}}>Limitsiz</option>
                                        <option value="custom" {{old('duration') == 'custom' ? 'selected' : ''}}>Tarix seçim</option>
                                    </select>
                                </div>

                                <div class="form-group" id="expiresGroup" style="display:none;">
                                    <label>Bitmə tarixi:</label>
                                    <input type="datetime-local" name="expires_at" id="expiresAt" class="form-control"
                                           value="{{old('expires_at')}}">
                                </div>

                                <div class="alert alert-info">
                                    Abunəlik dərhal <strong>aktiv</strong> olur, məbləğ <strong>0</strong> yazılır və
                                    ödəniş tarixi boş qalır. Cədvəldə <strong>Manual</strong> kimi görünəcək və
                                    istənilən vaxt ləğv edilə bilər.
                                </div>

                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary">Abunəlik ver <i
                                            class="icon-paperplane ml-2"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- /content area -->

        @include('admin-panel/includes/footer')

    </div>
    <!-- /main content -->

    <script>
        $(function () {
            $('#userSelect').select2({
                placeholder: '— İstifadəçi axtarın —',
                minimumInputLength: 2,
                ajax: {
                    // route() keeps the /az locale prefix — url() drops it and 404s.
                    url: "{{ route('studioSubscriptionUsersApi') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return { q: params.term, page: params.page || 1 };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.results,
                            pagination: { more: !!(data.pagination && data.pagination.more) }
                        };
                    },
                    cache: true
                }
            });

            function toggleExpires() {
                var isCustom = $('#durationSelect').val() === 'custom';
                $('#expiresGroup').toggle(isCustom);
                if (!isCustom) {
                    $('#expiresAt').val('');
                }
            }

            $('#durationSelect').on('change', toggleExpires);
            toggleExpires();
        });
    </script>
@endsection