@extends('layouts.contentLayoutMaster')
@php
$breadcrumbs = [[['link' => route('contract_terms.index'), 'name' => 'شروط التعاقد'],['link' => route('contract_terms.create'), 'name' => "اضافة شروط "]],['title'=> 'اضافة شروط']];
@endphp

@section('title', 'اضافة تصميم ')
@section('page-style')
{{--    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />--}}
    <style>
        /* For other boilerplate styles, see: https://www.tiny.cloud/docs/tinymce/6/editor-content-css/ */
        /*
        * For rendering images inserted using the image plugin.
        * Includes image captions using the HTML5 figure element.
        */

        figure.image {
            display: inline-block;
            border: 1px solid gray;
            margin: 0 2px 0 1px;
            background: #f5f2f0;
        }

        figure.align-left {
            float: left;
        }

        figure.align-right {
            float: right;
        }

        figure.image img {
            margin: 8px 8px 0 8px;
        }

        figure.image figcaption {
            margin: 6px 8px 6px 8px;
            text-align: center;
        }

        /*
         Alignment using classes rather than inline styles
         check out the "formats" option
        */

        img.align-left {
            float: left;
        }

        img.align-right {
            float: right;
        }

        /* Basic styles for Table of Contents plugin (tableofcontents) */
        .mce-toc {
            border: 1px solid gray;
        }

        .mce-toc h2 {
            margin: 4px;
        }

        .mce-toc li {
            list-style-type: none;
        }
    </style>
@endsection
@section('content')
    @foreach (['danger', 'warning', 'success', 'info', 'secondary', 'primary', 'dark', 'light'] as $msg)
        @if(\Illuminate\Support\Facades\Session::has('alert-' . $msg))
            <div class="alert alert-{{ $msg }}" role="alert">
                <div class="alert-body">
                    {!! \Illuminate\Support\Facades\Session::get('alert-' . $msg) !!}
                </div>
            </div>
        @endif
    @endforeach
@component('components.forms.formCard',['title' => 'اضافة تصميم تعاقد'])

{!! Form::open(['route' => 'contract_terms.store','method'=>'POST' , 'onsubmit' => 'showLoader()','files' => true])  !!}

<x-ui.divider>معلومات التصميم</x-ui.divider>

    <div class="row mb-1">
        <div class="col-md">
            <p class="my-50">
                <a href="#" id="blog-image-text">تعليمات: اذا اردت ان تترك مكان لقيمة متغيرة فيمكنك من خلال اضافة @ ثم اسم المتغير من خلال القائمة</a>
            <ul>
                <li> كود التعاقد <strong>@contract_code</strong></li>
                <li> تاريخ التعاقد <strong>@contract_date</strong></li>
                <li> مسئول التعاقد <strong>@contract_admin</strong></li>
                <li> اسم الطالب <strong>@student_name</strong></li>
                <li> رقم هوية الطالب <strong>@student_national_id</strong></li>
                <li> تاريخ ميلاد الطالب <strong>@student_birth_date</strong></li>
                <li> جنسية ولي الامر <strong>@parent_nationality</strong></li>
                <li> اسم ولي الامر <strong>@parent_name</strong></li>
                <li> عنوان ولي الامر <strong>@parent_address</strong></li>
                <li> رقم هاتف ولي الامر <strong>@parent_phone</strong></li>
                <li> بريد ولي الامر <strong>@parent_email</strong></li>
                <li> رقم هوية ولي الامر <strong>@parent_national_id</strong></li>
                <li> السنة الدراسية <strong>@contract_year</strong></li>
                <li> الصف <strong>@contract_level</strong></li>
                <li> المسار <strong>@contract_grade</strong></li>
                <li> القسم <strong>@contract_gender</strong></li>
                <li> المصاريف الدراسية <strong>@contract_tuition</strong></li>
                <li> اجمالي المصاريف <strong>@contract_total</strong></li>
            </ul>
            </p>
            <label for="editor">نص العقد</label>
            <textarea class="form-control editor" id="editor" rows="5" name="content" placeholder="ادخل نص العقد" data-msg="نص العقد بشكل صحيح"></textarea>
{{--            <x-inputs.text.Input type="textarea" class="editor" id="editor" class="editor" label="نص العقد" name="content" placeholder="ادخل نص العقد" data-msg="نص العقد بشكل صحيح" />--}}
        </div>
    </div>
    <div class="col-md">
        <div class="border rounded p-2">
            <h4 class="mb-1">صورة الخلفية </h4>
            <div class="d-flex flex-column flex-md-row">
{{--                <img src="{{ $contract_term->background && \Illuminate\Support\Facades\Storage::disk('s3')->exists($contract_term->background) ? getSpaceUrl($contract_term->background) : asset('assets/logo-removebg-preview.png') }}" id="blog-feature-image" class="rounded me-2 mb-1 mb-md-0" width="170" height="110" alt="Blog Featured Image" />--}}
                <div class="featured-info">
                    <p class="my-50">
                        <a href="#" id="blog-image-text">مسموح (jpg,jpeg,bmp,png) من فضلك قم باختيار صورة بأبعاد تصلح لتكون خلفيه لنموذج A4</a>
                    </p>
                    <div class="d-inline-block">
                        {{ Form::file('background', null, ['accept' => 'image/*','class'=>'form-control'])}}
                        @error('background')
                        <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                        @enderror

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input type="number" min="0" icon="align-justify" label="عدد البيكسيل المتروكة من اليسار " name="left" placeholder="ادخل عدد البيكسيل" data-msg="عدد البيكسيل من اليسار بشكل صحيح" />
        </div>
        <div class="col-md">
            <x-inputs.text.Input type="number" min="0" icon="align-justify" label="عدد البيكسيل المتروكة من الاعلي " name="top" placeholder="ادخل عدد البيكسيل" data-msg="عدد البيكسيل من الاعلي بشكل صحيح" />
        </div>
        <div class="col-md">
            <x-inputs.text.Input type="number" min="0" step="0.01"  max="1" icon="align-justify" label="الشفافية " name="opacity" placeholder="ادخل الشفافية من 0 ل 1" data-msg="الشفافية بشكل صحيح" />
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input icon="align-justify" label="رقم النسخه" name="version" placeholder="ادخل رقم النسخه" data-msg="رقم النسخه بشكل صحيح" />
        </div>



        <div class="col-md">
            <label class="form-label mb-1"> افتراضي ؟ </label>
            <x-inputs.checkbox name="is_default">
                إفتراضي
            </x-inputs.checkbox>
        </div>
        <div class="col-md">
            <label class="form-label mb-1"> التطبيق علي التعاقدات الحالية ؟ </label>
            <x-inputs.checkbox name="apply">
                تطبيق علي التعاقدات الحالية في حالة انه افتراضي
            </x-inputs.checkbox>
        </div>
    </div>

    <div class="col-12 text-center mt-2">
        <x-inputs.submit> اضافة </x-inputs.submit>

        <x-inputs.link route="contract_terms.index">عودة</x-inputs.link>
    </div>
    {!! Form::close() !!}

    @endcomponent

    @endsection