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

@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('clinic.pricing.create') }}</h1>
                </div>
                <a href="{{ route('admin.dashboard.clinic.pricing.index') }}" class="btn btn-sm fw-bold btn-secondary">{{ trans('clinic.common.back') }}</a>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <p class="text-muted mb-7">{{ trans('clinic.pricing.intro') }}</p>

                <form action="{{ route('admin.dashboard.clinic.pricing.store') }}" method="POST" id="pricingForm">
                    @csrf
                    @include('dashboard.admin.clinic.pricing.partials.form', ['mode' => 'create'])

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">{{ trans('clinic.common.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\Admin\Clinic\StoreServicePriceRequest', '#pricingForm') !!}
    <script>
        $(function () {
            function filterClinicsByBranch() {
                var branchId = $('#branch_id').val();
                var $clinic = $('#clinic_profile_id');

                $clinic.find('option[data-branch-id]').each(function () {
                    var show = !branchId || $(this).data('branch-id') == branchId;
                    $(this).toggle(show);
                });

                if ($clinic.find('option:selected').is(':hidden')) {
                    $clinic.val('').trigger('change');
                }
            }

            function refreshDoctors() {
                var clinicId = $('#clinic_profile_id').val();
                var $doctor = $('#doctor_id');

                $doctor.empty();

                if (!clinicId) {
                    $doctor.append($('<option value=""></option>').text('{{ trans('clinic.pricing.select_clinic_first') }}'));
                    $doctor.prop('disabled', true);
                    return;
                }

                $doctor.prop('disabled', false).append($('<option value=""></option>').text('—'));

                $.getJSON('{{ route('admin.dashboard.clinic.pricing.clinic-doctors') }}', {
                    clinic_profile_id: clinicId
                }).done(function (response) {
                    (response.data || []).forEach(function (doctor) {
                        $doctor.append($('<option></option>').val(doctor.id).text(doctor.text));
                    });
                });
            }

            $('#branch_id').on('change', filterClinicsByBranch);
            $('#clinic_profile_id').on('change', refreshDoctors);

            filterClinicsByBranch();
        });
    </script>
    @include('dashboard.admin.clinic.pricing.partials.split-preview-js')
@endsection