@extends('layouts.app')

@php
    $common_helper = \App\Helpers\CommonHelper::class;
@endphp



@section('title')
   {{ $common_helper::snakeCaseToPascalCase($name) }} Designer
@endsection

@section('top-bar')
    @include('includes.top-bar')
@stop
@section('left-sidebar')
    @include('includes.left-sidebar')
@stop


@push('include-css')
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #f0f0f0;
    }

    .container{
        background-color: #fff;
    }

    .hide{
        display: none;
    }
    .controls {
        margin-bottom: 20px;
    }
    .drawing-container {
        margin-bottom: 20px;
        border: 3px solid black;
        padding: 2rem;;
        margin-top:8rem !important;
        border-radius: 10px;
    }
    .draggable_field {
        background-color: #fff;
        border: 1px solid #ccc;
        cursor: grab;
        border-radius: 5px;
        padding-left:3px;
    }

    .canvas-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #designer_canvas{

        position: relative;
        width: 500px;
        height: 300px;
        background-color: #fff;
        border: 1px solid #ddd;
        overflow: auto;
        margin-bottom: 3rem;;

    }

    .canvas_background{
        /* background-size: 100% 100%; */
        background-repeat: no-repeat;
        background-position: center;
        background-position: top center;
    }
    #designer_canvas .draggable_field{

        /* opacity: 80%; */

        background-color: rgba(255, 255, 255, 0.8); /* Black with 50% opacity */
    }

    .draggable_field img{
        opacity: 70%;
    }
    .attributes-toggle {
        margin-top: 5px;
        padding: 5px 10px;
        background-color: #ccc;
        border: none;
        cursor: pointer;
    }

    .attributes-container.show {
        display: block;
    }
    .attributes-toggle {
        margin-top: 5px;
        padding: 5px 10px;
        background-color: #ccc;
        border: none;
        cursor: pointer;
    }
   .attributes-container {
        display: none;
        /* margin-top: 10px; */
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #fff;
    }
    .attributes-container.show {
        display: block;
    }

    .selected {
        border: 2px solid blue;
        cursor: grabbing;
    }
    .attributes-container {
        cursor: auto;
    }
    label {
        user-select: none;
        width:100%;
    }
    #remove-container {
        border: 2px dashed #ff0000;
        background-color: #ffeeee;
        padding: 5px;
        text-align: center;
        width:100px;;
        position: relative;
    }

    #remove-container p {
        margin: 0;
    }

    #remove-container.dragover {
        background-color: #ffdddd;
    }

    .pull-right{
        float: right;
    }

    *{
        /* outline: 1px solid red; */
    }

    .mt-1{
        margin-top: 0.5rem;
    }
    .mt-2{
        margin-top: 1rem;
    }
    .mb-1{
        margin-bottom: 0.5rem;
    }
    .mb-2{
        margin-bottom: 1rem;
    }

    .draggable_field img{
        cursor: auto;
    }
    .page_separator{
        position: absolute; 
        width:100%
    }
    .page_separator hr{
        height: 1px;   
        background-color: black;  
        border: none; 
        width:100%;
        margin:0px
    }
    .canvas_images{

        background-repeat: no-repeat;
        background-position: center;
        background-position: top center;
        background-size: 100% 100%;

    }
    .back{
        z-index: 0;
    }
    .front{
        z-index: 2;
    }

    #designer_canvas::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .fields-keys {
        overflow-y: scroll;
        overflow-x: hidden;
        height: 300px;
    }

</style>
@endpush

<div class="container">

    @php
        $common_helper = \App\Helpers\CommonHelper::class;
    @endphp

    <div class="drawing-container">

        
        <legend>{{ $common_helper::snakeCaseToPascalCase($name) }} Designer</legend>

        <input type="hidden" name="template_name" value="{{ $name }}" />

        <div class="row">

            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <legend>{{__('lang.basic_settings')}}</legend>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="form-group form-float">
                    <div class="form-line focused">
                        <select data-live-search="true" class="form-control show-tick" name="sell_id">
                            <option value="0" >{{__('lang.select_sale')}}</option>
                            @foreach( App\Models\Sell::orderByDesc('id')->get() as $sell )
                            <option  @if(request()->get('sell_id') == $sell->id ) selected @endif value="{{ $sell->id  }}">
                                
                                {{ $sell->id  }} - {{ $sell->registration_no  }} -  {{ $sell->customer->name ??'-'  }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label">{{__('lang.sale_preview')}}</label>
                    </div>
                </div>
            </div> 
        </div>

        {{-- @dd($fields) --}}

        <div class="row">
            <div class="col-sm-3">
                <label class="form-label">{{__('lang.paper_width')}} ({{__('lang.in')}})</label>
            </div>

            <div class="col-sm-3">
                <input type="number" class="form-control" id="paper_width" value="{{ $document->document_width ?? "8.5" }}" step="0.1" placeholder="Canvas Width" onkeyup="setCanvasSize()" onchange="setCanvasSize()">
            </div>

            <div class="col-sm-3">
                <label class="form-label">{{__('lang.paper_height')}} ({{__('lang.in')}})</label>
            </div>

            <div class="col-sm-3">
                <input type="number" class="form-control" id="paper_height" value="{{ $document->document_height ?? "11.57" }}" step="0.1" placeholder="Canvas Height" onkeyup="setCanvasSize()" onchange="setCanvasSize()">
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-sm-3">
                <label class="form-label" for="field-width">{{__('lang.default_field_width')}} ({{__('lang.px')}})</label>
            </div>
            <div class="col-sm-3">
                <input class="form-control" type="number" id="field-width" value="150" >
            </div>

            <div class="col-sm-3">
                <label class="form-label" for="field-width">{{__('lang.default_font_size')}} ({{__('lang.px')}})</label>
            </div>
            <div class="col-sm-3">
                <input class="form-control" type="number" id="default_font_size" value="14">
            </div>

            <div class="col-sm-3 mt-2">
                <label class="form-label" for="field-width">{{__('lang.default_letter_spacing')}} (+{{__('lang.px')}}) ({{__('lang.optional')}})</label>
            </div>
            <div class="col-sm-3 mt-2">
                <input class="form-control" type="number" id="default_letter_spacing" value="0">
            </div>

            <div class="col-sm-3 mt-2">
                <label class="form-label">{{__('lang.no_of_pages')}}</label>
            </div>

            <div class="col-sm-3 mt-2">
                <input type="number" class="form-control" id="no_of_pages" value="{{ $document->no_of_pages ?? "1" }}" step="1" placeholder="No Of Pages" onkeyup="setCanvasSize()" onchange="setCanvasSize()">
            </div>


            <div class="col-sm-6 mt-2">
                <div class="form-group form-float">
                    <div class="form-line" style="margin-top: 4px"> 
                        <input name="show_background_image_on_pdf" type="checkbox" id="show_background_image_on_pdf" value="1" @if( ($document->show_background_image_on_pdf ?? 0) == 1) checked @endif >
                        <label for="show_background_image_on_pdf" ><b>{{__('lang.show_background_image_on_pdf')}}</b></label>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="fields">
            <legend>{{__('lang.fields')}}</legend>

            <div class="row fields-keys">

                @foreach ($fields ?? [] as $field_name => $field_val)
                <div class="col-sm-3 mt-1">
                    <div class="draggable_field  {{ $field_name }}" draggable="true" data-value = "{{ $field_val }}">
                        {{ $field_name }}
                    </div>
                </div>
                @endforeach
             
            </div>

        </div>

        <hr>

        <div class="row">

            <div class="col-sm-6">
                <div class="row" id="background_image_div">

                </div>
                {{-- <input type="file" class="form-control" name="background_image"   accept="image/png , image/gif, image/jpg, image/jpeg" /> --}}
            </div>
            <div class="col-sm-2">

                @if($document->img_url && file_exists($document->img_url))
                    <button class="btn btn-primary" onclick="toggleBackground()">{{__('lang.toggle_background_image')}}</button>
                @endif

            </div>
            <div class="col-sm-4">
                <div class="pull-right">
                    <button  class="btn btn-danger" onclick="setDefaults()">{{__('lang.set_defaults')}}</button>
                    <button  class="btn btn-warning" onclick="removeAllFields()">{{__('lang.remove_all_fields')}}</button>
                    <button id="submit-button" class="btn btn-primary">{{__('lang.submit')}}</button>

                </div>
            </div>
        </div>


    </div>

    <div class="canvas-container">
        <div id="designer_canvas" class="canvas canvas_background">

            <div id="remove-container" class="front">
                <p><i class="fas fa-trash"></i> {{__('lang.remove')}}</p>
            </div>
            
        </div>
    </div>

</div>


@push('include-css')
    <link href="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') }}"
    rel="stylesheet" />

    <!-- Bootstrap DatePicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />
    <!-- Wait Me Css -->
    <link href="{{ loadAsset('asset/plugins/waitme/waitMe.css') }}" rel="stylesheet" />

    <!-- Colorpicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />

    <!-- Dropzone Css -->
    <link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">

    <!-- Multi Select Css -->
    <link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">

    <!-- Bootstrap Spinner Css -->
    <link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">

    <!-- Bootstrap Tagsinput Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">

    <!-- Bootstrap Select Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" />
@endpush

@push('include-js')
    {{-- <script src="{{ loadAsset('asset/js/pages/ui/modals.js') }}"></script> --}}
    <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

    <!-- Moment Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}">
    </script>

    <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>
    <!-- Autosize Plugin Js -->

    <script>
        @if (Session::has('success'))
            toastr["success"]('{{ Session::get('success') }}');
        @endif

        @if (Session::has('error'))
            toastr["error"]('{{ Session::get('error') }}');
        @endif

        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr["error"]('{{ $error }}');
            @endforeach
        @endif
    </script>

    {{-- All datagrid --}}
    <script src="{{ loadAsset('asset/js/dataTable.js') }}"></script>
    <script>
        BaseController.init();
    </script>


    <script>
        const document_details = @json($document_details);
        let  background_images = @json($document->background_images??[]);
        let store_route_ajax  = '{{ route("template_designer.store") }}';
        let default_settings_ajax  = '{{ route("template_designer.set_default") }}';
        let removeBackgroundAjax =  '{{ route("template_designer.remove_background",$name) }}';
    </script>

    <script src="{{ loadAsset('asset/js/custom/template_designer.js') }}"></script>

@endpush