@extends('layouts.contentLayoutMaster')
@php
$breadcrumbs = [[['link' => route('contract_terms.index'), 'name' => 'شروط التعاقد'],['link' => route('contract_terms.edit',$contract_term), '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')

@component('components.forms.formCard',['title' => 'تعديل تصميم تعاقد'])

{!! Form::model($contract_term, ['method' => 'PUT', 'onsubmit' => 'showLoader()','route' => ['contract_terms.update', $contract_term->id],'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>
{{--            <div id="frola_editor"></div>--}}
{{--            <label for="edictor">نص العقد</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" 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 != null && \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