@extends('admin.layouts.main')
@section('content')
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ trans('messages.Show Form') }}</h3>
            </div>

        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        <div class="box">
            <div class="box-body no-padding">
                <div class="box box-inverse box-secondary">
                    <div class="box-header ">
                        <h3 class="box-title"><strong>{{ $form->name }}</strong></h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12 data-group">
                                <span> <strong>Desc:</strong></span>
                                <span>{{ $form->desc }}</span>
                            </div>
                            <div class="col-md-3 data-group">
                                <span> <strong>Step:</strong></span>
                                <span>{{ $form->step }}</span>
                            </div>
                            <div class="col-md-3 data-group">
                                <span> <strong>Type:</strong></span>
                                <span>{{ $form->periodic_onetime }}</span>
                            </div>
                            <div class="col-md-3 data-group">
                                <span> <strong>Expiration After:</strong></span>
                                <span>{{ $form->dead_line_by_num_of_dayes }} Days</span>
                            </div>
                            @if (
                                $form->periodic_onetime == 'periodic' ||
                                    ($form->periodic_onetime == 'onetime' && $form->one_time_type == 'spacific'))
                                <div class="col-md-3 data-group">
                                    @if ($form->periodic_onetime == 'onetime' && $form->one_time_type == 'spacific')
                                        <span> <strong>Send Time Date:</strong></span>
                                        <span>{{ date('Y-m-d', strtotime($form->one_type_send_time)) }}</span>
                                    @else
                                        <span> <strong>Next Send Time Date:</strong></span>
                                        <span>{{ date('Y-m-d', strtotime($form->nex_send_date)) }}</span>
                                    @endif

                                </div>
                            @endif
                            
                             <div class="col-md-3 data-group">
                                <span> <strong>Approval:</strong></span>
                                <span>{{ $form->approved == 1 ? "Approval" : "Not Approval" }}</span>
                            </div>

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


                <style>
                    #gallery-content-center img {
                        width: 100px
                    }

                    .form-label {
                        padding-block: 10px;
                        /* border-bottom: 1px solid #ccc; */
                        box-shadow: 1px 0px 1px rgba(173, 173, 173, 0.932);
                    }
                </style>
                <div class="box bl-3 border-primary">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md">
                                <div class="box-header">
                                    <h3 class="text-center">Projects To Send</h3>
                                </div>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead class="bg-inverse">
                                            <tr>
                                                <th>#</th>
                                                <th>First Name</th>
                                                <th>HSE Manager Name</th>
                                                <th>Username</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($form->projects as $key => $project)
                                                <tr>
                                                    <td>{{ $key + 1 }}</td>
                                                    <td><a
                                                            href="{{ route('project.show', $project->id) }}">{{ $project->name }}</a>
                                                    </td>
                                                    <td>{{ $project->hse_manager_name }}</td>
                                                    <td>{{ $project->email }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="box-header">
                                    <h3 class="text-center">Form Data</h3>
                                </div>
                                <div class="attached-data">
                                    <div id="gallery-content">
                                        <div id="gallery-content-center">
                                            <div class="row">
                                                @foreach ($form->formFiles as $file)
                                                    @switch($file->type)
                                                        @case('image/png')
                                                            <a href="{{ url($file->file_path) }}" data-toggle="lightbox"
                                                                data-gallery="multiimages" data-title="Show Form Files"><img
                                                                    src="{{ url($file->file_path) }}" alt="gallery"
                                                                    class="all studio col-md-4" /> </a>
                                                        @break

                                                        @case('image/jpg')
                                                            <a href="{{ url($file->file_path) }}" data-toggle="lightbox"
                                                                data-gallery="multiimages" data-title="Show Form Files"><img
                                                                    src="{{ url($file->file_path) }}" alt="gallery"
                                                                    class="all studio col-md-4" /> </a>
                                                        @break

                                                        @case('image/jpeg')
                                                            <a href="{{ url($file->file_path) }}" data-toggle="lightbox"
                                                                data-gallery="multiimages" data-title="Show Form Files"><img
                                                                    src="{{ url($file->file_path) }}" alt="gallery"
                                                                    class="all studio col-md-4" /> </a>
                                                        @break

                                                        @case('application/pdf')
                                                            <a href="{{ url($file->file_path) }}" data-fancybox data-type="iframe">
                                                                <img src="{{ url('front_end/assets/imgs/file-icon.png') }}"
                                                                    alt="">
                                                            </a>
                                                        @break

                                                        @default
                                                    @endswitch
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @php
                                    $bills = [
                                        'text' => 'badge-info-light',
                                        'number' => 'badge-primary-light',
                                        'textarea' => 'badge-danger-light',
                                        'file' => 'badge-warning-light',
                                         'checkbox' => 'badge-secondary-light',
                                         'radio' => 'badge-dark'
                                    ];
                                @endphp
                                @foreach ($form->formInputs as $key => $input)
                                    <div for="text-input" class="form-label px-3 d-flex justify-content-between">
                                        <span class="input-label d-block ">
                                            {{ $input->label }}
                                        </span>
                                        <div class="field-padges">
                                            <span
                                                                                        class="badge badge-pill {{ $bills[$input->input_type] }}">{{ $input->input_type }}</span>
                                            <span
                                                class="badge badge-pill {{ $bills[$input->input_type] }}">{{ $input->value }}</span>
                                            <span
                                                class="badge badge-pill {{ $bills[$input->input_type] }}">{{ $input->placeholder }}</span>

                                            @if(in_array($input->input_type,['checkbox','radio']))
                                                @foreach($input->inputsElemnts as $el)
                                                    <span
                                                        class="badge badge-pill {{$input->value == $el->name ? $bills[$input->input_type] :'badge-primary-light' }}">{{ $el->name }}</span>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </section>
@endsection
@section('modal')
    <div class="modal modal-left fade" id="modal-left" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content" id="view-company">

            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        // delegate calls to data-toggle="lightbox"
        $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
            event.preventDefault();
            return $(this).ekkoLightbox({
                onShown: function() {
                    if (window.console) {
                        return console.log('Checking our the events huh?');
                    }
                },
                onNavigate: function(direction, itemIndex) {
                    if (window.console) {
                        return console.log('Navigating ' + direction + '. Current item: ' + itemIndex);
                    }
                }
            });
        });
        //Programatically call
        $('#open-image').click(function(e) {
            e.preventDefault();
            $(this).ekkoLightbox();
        });
        $('#open-youtube').click(function(e) {
            e.preventDefault();
            $(this).ekkoLightbox();
        });
        // navigateTo
        $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
            event.preventDefault();
            var lb;
            return $(this).ekkoLightbox({
                onShown: function() {
                    lb = this;
                    $(lb.modal_content).on('click', '.modal-footer a', function(e) {
                        e.preventDefault();
                        lb.navigateTo(2);
                    });
                }
            });
        });
    </script>
@endsection