@include('shared.header')
@include('shared.navbar')
<div class="row">
    <div class="col-md-12">
        <a href="{{ url('adminPanel/show-publications/' . $publications->cat_id) }}" class="btn btn-primary">رجوع</a>

    </div>
</div>
<!-- /. ROW  -->
<hr />
<div class="row" style="padding: 50px;">
    <div class="col-md-12">
        <img src="{{ asset('assets/project_asset/publications/' . $publications->Photo) }}" style="width: 30%"
            alt="">
        <h1 style="font-weight: bold">العنوان باللغه العربيه</h1>
        <p style="font-size: 20px;"> {{ $publications->News_Title }} </p>
        <h1 style="font-weight: bold">العنوان باللغه الانجليزيه</h1>
        <p style="font-size: 20px;"> {{ $publications->News_Title_en }} </p>
        
        @if ($publications->News_Description)
        <h1 style="font-weight: bold">التفاصيل باللغه العربيه</h1>
            <p style="font-size: 20px;"> {!! $publications->News_Description !!} </p>
        @endif

        @if ($publications->News_Description_en)
            <h1 style="font-weight: bold">التفاصيل باللغه الانجليزيه</h1>
            <p style="font-size: 20px;"> {!! $publications->News_Description_en !!} </p>
        @endif

        <h1 style="font-weight: bold">الصوره فى الرئيسيه</h1>
        <img src="{{ asset('' . $publications->img_home) }}" style="width: 10%" alt="">

        <h1 style="font-weight: bold">الصوره</h1>
        <img src="{{ asset('' . $publications->img) }}" style="width: 10%" alt="">

        <h1 style="font-weight: bold">الظهور / الاخفاء</h1>
        @if ($publications->Display == 1)
            <i class="fa fa-check-circle" style="font-size: 30px; color: red"></i>
        @else
            <i class="fa fa-check-circle" style="font-size: 30px; color: #000"></i>
        @endif
        
        <div class="panel-body">
            <h1 style="font-weight: bold">المفات</h1>
            @foreach ($publications->pdfs as $pdf)
                <div style="font-size: 20px; height: 80px; padding-top: 25px;" class="form-control">
                    <img src="{{ asset('images/pdf.png') }}" style="width: 20px;">
                    <a href="{{ url('' . $pdf->Pdf) }}"
                        target="_blank"> {{ $pdf->Title }} </a>
                </div><br>
            @endforeach

        </div>

    </div>
</div>

<style>
    @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:700);

    html,
    body {
        background: #C5CBD1;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    h2 {
        color: #282F35;
        font-family: 'Josefin Sans', Arial, sans-serif;
        font-size: 18px;
        letter-spacing: 1px;
        margin: 0;
        text-transform: uppercase;
    }

    p {
        color: #666666;
        font-family: 'Malgun Gothic', Arial, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        margin: 20px;
    }

    .container {
        max-width: 640px;
        margin: 0 auto;
    }

    .acc {
        margin: 90px 0;
        overflow: hidden;
        padding: 0;
    }

    .acc li {
        list-style-type: none;
        padding: 0;
    }

    .acc_ctrl {
        background: #FFFFFF;
        border: none;
        border-bottom: solid 1px #F2F2F2;
        cursor: pointer;
        display: block;
        outline: none;
        padding: 2em;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .acc_ctrl:before {
        background: #44596B;
        content: '';
        height: 2px;
        margin-right: 37px;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        width: 14px;
    }

    .acc_ctrl:after {
        background: #44596B;
        content: '';
        height: 2px;
        margin-right: 37px;
        position: absolute;
        right: 0;
        top: 50%;
        width: 14px;
    }

    .acc_ctrl.active:before {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .acc_ctrl.active h2,
    .acc_ctrl:focus h2 {
        position: relative;
    }

    .acc_panel {
        background: #F2F2F2;
        display: none;
        overflow: hidden;
    }
</style>
<script>
    $(function() {
        $('.acc_ctrl').on('click', function(e) {
            e.preventDefault();
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $(this).next()
                    .stop()
                    .slideUp(300);
            } else {
                $(this).addClass('active');
                $(this).next()
                    .stop()
                    .slideDown(300);
            }
        });
    });
</script>

@include('shared.footer')