@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="req_serv_pg section">
            <div class="container">
                <div class="inner">
                    <form method="post"
                          class="form-submit-loader2"
                          action="{{ route('web.service-requests.store') }}"
                          enctype="multipart/form-data">
                        @csrf
                        <h2 class="title_w_shape w-fit mx-auto mb-5">
                            <span> {{ __('servicerequests::service_requests.request_your_service') }} </span>
                        </h2>

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <select name="stage_id"
                                            class="form-control form-select stage-select"
                                            data-selected-grade-id="{{ old('grade_id') }}"
                                            data-show-loading="false">
                                        <option value=""
                                                selected> {{ __('courses::courses.stage_id') }} </option>
                                        @if(isset($stages))
                                            @foreach($stages as $stage)
                                                <option
                                                    value="{{ $stage->id }}" @selected(old('stage_id') == $stage->id)>
                                                    {{ $stage->title }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <select name="grade_id"
                                            class="form-control form-select grade-select"
                                            data-selected-subject-id="{{ old('subject_id') }}"
                                            data-show-loading="false"
                                            data-title="{{ __('courses::courses.grade_id') }}">
                                        <option value=""
                                                selected> {{ __('courses::courses.grade_id') }} </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <select name="subject_id"
                                            class="form-control form-select subject-select"
                                            data-title="{{ __('courses::courses.subject_id') }}">
                                        <option value=""
                                                selected> {{ __('courses::courses.subject_id') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group purp_group">
                                    <label
                                        class="label "> {{ __('servicerequests::service_requests.service_id') }} </label>
                                    <div class="row">
                                        @if(isset($services))
                                            @foreach($services as $service)
                                                <div class="col">
                                                    <div class="form-check">
                                                        <input class="form-check-input"
                                                               type="radio"
                                                               name="service_id"
                                                               value="{{ $service->id }}"
                                                               id="purpRadio{{ $service->id }}" @checked(old('service_id') == $service->id)/>
                                                        <label class="form-check-label"
                                                               for="purpRadio{{ $service->id }}">
                                                            <span class="title">{{ $service->title }}</span>
                                                            <span class="price">
                                                                ({{ format_amount_with_currency($service->price) }})
                                                            </span>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <textarea rows="3" class="form-control" name="notes"
                                              placeholder="{{ __('servicerequests::service_requests.notes') }}"
                                    >{{ old('notes') }}</textarea>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="uploading_box">
                                    <div class="cv_uploading_box justify-content-center d-flex align-items-center ">
                                        <div class="upload_txt">
                                            <img src="{{asset('assets/web/images/icons/upload.svg')}}" class="icon"
                                                 alt=""/>
                                            <h5 class="label fs-6 fw-bold mb-3">
                                                {{ __('servicerequests::service_requests.select_drag_file') }}
                                            </h5>
                                            <div
                                                class="p"> {{ __('servicerequests::service_requests.extension_max_file') }} </div>
                                            <div class="upload-main-wrapper mt-3">
                                                <div class="upload-wrapper">
                                                    <input type="file" id="upload-file" name="file"/>
                                                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                         xmlns:xlink="http://www.w3.org/1999/xlink"
                                                         preserveAspectRatio="xMidYMid meet"
                                                         viewBox="224.3881704980842 176.8527621722847 221.13266283524905 178.8472378277154"
                                                         width="221.13" height="178.85">
                                                        <defs>
                                                            <path
                                                                d="M357.38 176.85C386.18 176.85 409.53 204.24 409.53 238.02C409.53 239.29 409.5 240.56 409.42 241.81C430.23 246.95 445.52 264.16 445.52 284.59C445.52 284.59 445.52 284.59 445.52 284.59C445.52 309.08 423.56 328.94 396.47 328.94C384.17 328.94 285.74 328.94 273.44 328.94C246.35 328.94 224.39 309.08 224.39 284.59C224.39 284.59 224.39 284.59 224.39 284.59C224.39 263.24 241.08 245.41 263.31 241.2C265.3 218.05 281.96 199.98 302.22 199.98C306.67 199.98 310.94 200.85 314.93 202.46C324.4 186.96 339.88 176.85 357.38 176.85Z"
                                                                id="b1aO7LLtdW"></path>
                                                            <path
                                                                d="M306.46 297.6L339.79 297.6L373.13 297.6L339.79 255.94L306.46 297.6Z"
                                                                id="c4SXvvMdYD"></path>
                                                            <path
                                                                d="M350.79 293.05L328.79 293.05L328.79 355.7L350.79 355.7L350.79 293.05Z"
                                                                id="b11si2zUk"></path>
                                                        </defs>
                                                        <g>
                                                            <g>
                                                                <g>
                                                                    <use xlink:href="#b1aO7LLtdW" opacity="1"
                                                                         fill="#ffffff" fill-opacity="1"></use>
                                                                </g>
                                                                <g>
                                                                    <g>
                                                                        <use xlink:href="#c4SXvvMdYD" opacity="1"
                                                                             fill="#363535" fill-opacity="1"></use>
                                                                    </g>
                                                                    <g>
                                                                        <use xlink:href="#b11si2zUk" opacity="1"
                                                                             fill="#363535" fill-opacity="1"></use>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                    <span class="file-upload-text">
                                                        {{ __('servicerequests::service_requests.browse_file') }}
                                                    </span>
                                                    <div class="file-success-text">
                                                        <svg version="1.1" id="check" xmlns="http://www.w3.org/2000/svg"
                                                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                             viewBox="0 0 100 100" xml:space="preserve">
                                                            <circle
                                                                style="fill:rgba(0,0,0,0);stroke:#256B7F;stroke-width:10;stroke-miterlimit:10;"
                                                                cx="49.799" cy="49.746" r="44.757"/>
                                                            <polyline
                                                                style="fill:rgba(0,0,0,0);stroke:#256B7F;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
                                                                points="
                                                                27.114,51 41.402,65.288 72.485,34.205 "/>
                                                        </svg>
                                                        <span> {{ __('servicerequests::service_requests.successfully_completed') }} </span>
                                                    </div>
                                                </div>
                                                <p id="file-upload-name"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mx-auto mt-5">
                                <button type="submit" class="w-100 butn primary_butn rounded fs-5">
                                    <span> {{ __('general.confirmation') }} </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    @include('admin.subjects::_module_script')
    @include('admin.courses::_module_script')

    <script>
        $(document).ready(function () {
            $('#upload-file').change(function () {
                var filename = $(this).val();
                $('#file-upload-name').html(filename);
                if (filename != "") {
                    setTimeout(function () {
                        $('.upload-wrapper').addClass("uploaded");
                    }, 600);
                    setTimeout(function () {
                        $('.upload-wrapper').removeClass("uploaded");
                        $('.upload-wrapper').addClass("success");
                    }, 1600);
                }
            });
        });
    </script>
@endpush