ÿØÿà JFIF 

  
 
  ÿÛ „ 	 ( %"1!%)+...383,7(-.+




-+++--++++---+-+-----+---------------+---+-++7-----ÿÀ  ß â
" 

ÿÄ   

           
 ÿÄ H 
     
 !1AQaq"‘¡2B±ÁÑð#R“Ò Tbr‚²á3csƒ’ÂñDS¢³$CÿÄ 
 


            
ÿÄ %

 
       
!1AQa"23‘ÿÚ 
  ? ôÿ ¨pŸªáÿ —åYõõ\?àÒü©ŠÄï¨pŸªáÿ —åYõõ\?àÓü©ŠÄá 0Ÿªáÿ Ÿå[úƒ	ú®ði~TÁb
qÐ8OÕpÿ ƒOò¤Oè`–RÂáœá™êi€ßÉ< FtŸI“öÌ8úDf´°å}“¾œ6
öFá°y¥jñÇh†ˆ¢ã/ÃÐ:ªcÈ
"Y¡ðÑl>ÿ ”ÏËte:qž\oäŠe÷󲍷˜HT4&ÿ ÓÐü6ö®¿øþßèô	Ÿ•7Ñi’•j|“ñì>b…þS?*Óôÿ ÓÐü*h¥£ír¶ü UãSç‚Ÿ[AÐaè[ûª•õ&õj?†Éö+EzP—WeÒírJFt	‘BŒ†Ï‡%#tE Øz ¥OÛ«!1›üä±Í™%º<!vB™'èÔ6´Ña¿«e`Àà0U[-ÂБ4)M÷YK*³hï÷%ÎÎkÇ«m‘-íWŽLsã?nÂ~«†üö®þ¡ÂlÃaÿ ‰ÿ l©°Õ¥ åÜá¿r ºL[Çâ°(Çè'Vãôl8´ÏRÀvLvPõ:…ÙNçF™÷ë>Íãö]°î(–:@<‹ŒÊö×òÆt¦ãº+‡¦%ÌÁ²h´OƒJŒtMÜ>ÀÜÊw3
Y´•牋4ǍýʏTì>œú=Íwhyë,¾Ôò×õ¿ßÊa»«þˆѪQ|%6ž™A	õ%:øj<>É—ÿ Å_ˆCbõ¥š±ý¯Ýƒï…¶|RëócÍf溪“t.СøTÿ *Ä¿-{†çàczůŽ_–^XþŒ±miB[X±d 1,é”zEù»&
î9gœf™9Ð'.;—™i}!ôšåîqêÛ٤ёý£½ÆA–àôe"A$˝Úsäÿ 
÷Û	#°xŸëí(l
	 »ý3—¥5m!
rt`†0~'j2(]S¦¦kv,ÚÇl¦øJA£Šƒ
J3E8ÙiŽ:cÉžúeZ°€¯\®kÖ(79«Ž:¯X”¾³Š&¡* ….‰Ž(ÜíŸ2¥ª‡×Hi²TF¤ò[¨íÈRëÉ䢍mgÑ.Ÿ<öäS0í„ǹÁU´f#Vß;Õ–…P@3ío<ä-±»Ž.L|kªÀê›fÂ6@»eu‚|ÓaÞÆŸ…¨ááå>åŠ?cKü6ùTÍÆ”†sĤÚ;H2RÚ†õ\Ö·Ÿn'¾ ñ#ºI¤Å´%çÁ­‚â7›‹qT3Iï¨Ö
Ú5I7Ë!ÅOóŸ¶øÝñØôת¦$Tcö‘[«Ö³šÒ';Aþ ¸èíg
A2Z
"i¸vdÄ÷.iõ®§)¿]¤À†–‡É&ä{V¶iŽ”.Ó×Õÿ û?h¬Mt–íª[ÿ Ñÿ ÌV(í}=ibÔ¡›¥¢±b
 Lô¥‡piη_Z<‡z§èŒ)iÖwiÇ 2hÙ3·=’d÷8éŽ1¦¸c¤µ€7›7Ø	ð\á)}	¹fËí›pAÃL%âc2 í§æQz¿;T8sæ°qø)QFMð‰XŒÂ±
N¢aF¨…8¯!U		Z©RÊ ÖPVÄÀÍin™Ì-GˆªÅËŠ›•zË}º±ŽÍFò¹}Uw×#ä5B¤{î}Ð<ÙD
é©¤&‡ïDbàÁôMÁ."
¤‡ú*õ'VŽ|¼´Úgllº¼klz[Æüï÷Aób‡Eÿ dÑ»Xx9ÃÜ£ÁT/`¼¸vI±Ýµ·Ë‚“G³þ*Ÿû´r|*}<¨îºœ @¦mÄ’M¹”.œ«Y–|6ÏU¤jç¥ÕÞqO
˜kDÆÁ¨5ÿ š;Њ¦¦€GÙk \
	–Þ=â¼=SͧµªS°ÚÍpÜãQűÀõ¬?ÃÁ1Ñ•õZà?hóœ€
L¦l{Y*K˜Ù›zc˜–ˆâø+¾	­-Ök¥%ùEÜA'}ˆ><ÊIè“bpÍ/qÞâvoX€w,\úªò6Z[XdÒæ­@Ö—€$òJí#é>'°Ú
ôª˜<)4ryÙ£|óAÅn5žêŸyÒäMÝ2{"}‰–¤l÷ûWX\l¾Á¸góÉOÔ /óñB¤f¸çñ[.P˜ZsÊË*ßT܈§QN¢’¡¨§V¼(Üù*eÕ“”5T¨‹Âê¥FŒã½Dü[8'Ò¥a…Ú¶k7a
*•›¼'Ò·\8¨ª\@\õ¢¦íq+DÙrmÎ…_ªæ»ŠÓœ¡¯’Ré9MÅ×D™lælffc+ŒÑ,ý™ÿ ¯þǤ=Å’Á7µ÷ÚÛ/“Ü
€ñýã¼àí¾ÕÑ+ƒ,uµMâÀÄbm:ÒÎPæ{˜Gz[ƒ¯«® KHà`ßØŠéí¯P8Aq.C‰ à€kòpj´kN¶qô€…Õ,ÜNŠª-­{Zö’æû44‰sŽè‰îVíRœÕm"
6?³D9¡ÇTíÅꋇ`4«¸ÝÁô ï’ýorqКÇZ«x4Žâéþuïf¹µö[P ,Q£éaX±`PÉÍZ ¸äYúgüAx
’6Lê‚xÝÓ*äQ
Ï’¨hÍ
=²,6ï#rÃ<¯–£»ƒ‹,–ê•€ aÛsñ'%Æ"®ÛüìBᝠHÚ3ß°©$“XnœÖ’î2ËTeûìxîß
¦å¿çÉ
ðK§þ{‘t‚Ϋ¬jéîZ[”š7L¥4VÚCE×]m¤Øy”ä4-dz£œ§¸x.*ã
ÊÊ b÷•h:©‡¦s`BTÁRû¾g⻩‹jø sF¢àJøFl‘È•Xᓁà~*j¯ +(ÚÕ6-£¯÷GŠØy‚<Ç’.F‹Hœw(+)ÜÜâÈzÄäT§FߘãÏ;DmVœ3Àu@mÚüXÝü•3B¨òÌÁÛ<·ÃÜz,Ì@õÅ·d2]ü8s÷IôÞ¯^Ç9¢u„~ëAŸï4«M?
K]­ÅàPl@s_ p:°¬ZR”´›JC[CS.h‹ƒïËœ«Æ]–÷ó‚wR×k7X‰k›‘´ù¦=¡«‰¨¨Â')—71ó’c‡Ðúµ
`é.{§p¹ój\Ž{1h{o±Ý=áUÊïGÖŒõ–-BÄm+AZX¶¡
ïHðæ¥JmÙ;…ä¡Ÿˆ¦ ° äšiÉg«$üMk5¤L“’çÊvïâï	,=f“"íἊ5ô¬x6{ɏžID0e¸vçmi'︧ºð9$ò¹÷*£’9ÿ ²TÔ…×>JV¥}Œ}$p[bÔ®*[jzS*8
”·T›Í–ñUîƒwo$áè=LT™ç—~ô·¤ÈÚ$榍q‰„+´kFm)ž‹©i–ËqÞŠ‰à¶ü( ‚•§ •°ò·‡#5ª•µÊ﯅¡X¨šÁ*F#TXJÊ
ušJVÍ&=iÄs1‚3•'fý§5Ñ<=[íÞ­
PÚ;ѱÌ_~Ä££8rÞ
²w;’hDT°>ÈG¬8Á²ÚzŽ®ò®qZcqJêäÞ-ö[ܘbň±çb“Š¶31²n×iƒðÕ;1¶þÉ
ªX‰,ßqÏ$>•î íZ¥Z 1{ç൵+ƒÕµ¥°T$§K]á»Ûï*·¤tMI’ÂZbŽÕiÒ˜}bÓ0£ª5›¨[5Ž^ÝœWøÂÝh°
¢OWun£¤5 a2Z.G2³YL]jåtì”
ä	ÁÓ‘%"©<ÔúÊ°sº UZvä‡ÄiÆÒM .÷V·™ø#kèýií<NçŽôª¦„lË»{ƒ®<
[¦Y‹éƒ}j•*‚±€I‡e&gbéšp9å^!®€ö?ù^àTzo@Q¨Aêœ& [”…üÔ}пF’Hq‚©´{“ëH·?.½%úå»É Á´9¿¼Ò‰Á¼Ì¥Ús¼zW¶aÃhwÖ…ÑÏ$mò´ë:×Ñγ|”x§
µ0Âз$·aÆn µ†šÇ³£‰Ì®ž
õ@kŽ«gtí䢩ÒP×5¤?µÿ m´Ì^ ‡8¸Á8‹”žÆWÑ ¡™„,Ì“»à‹ÃéV¸®á›ÐÇŽBÀ®Ã…Z”ØÛë8;é|Ñ5)7aÕ&2Ù¸÷©ö—Ð;‡¬7"¿"7M·d
ñœÒÌf5”ê ;"Ãp5¯¬3‹ùJÚÝG›½&¯<{òñKÎÖ“3:¦ÀòGPÅS¨;
à‘Ün´öpð±W)z'¬öÀÖ#Xf2& æ
Œ‹é¾"‹\!Ñ9…
0±2A›*ØMÄ $X
끫ØXÖ,X¥ ô'ËnFÍãlqJXçuaJ4¦„ëµ7ê;h"Zã¾Áä£,vÛ‹’N©E(Öu÷)…ÁaÜÇÔkˆ$‘1kmG¨øtÛ>Ì–ª)µT[)BˆõÑ
xB¾B€ÖT¨.¥~ð@VĶr#¸ü*åZNDŽH;âi 
],©£öØpù(šºãö¼T.uCê•4@ÿ GÕÛ)Cx›®0ø#:ÏðFÒbR\(€€Ä
®fã4Þ‰Fä¯HXƒÅ,†öEÑÔÜ]Öv²?tLÃvBY£ú6Êu5ÅAQ³1‘’¬x–HŒÐ‡ ^	¸KwJôÖŽ5×CÚ¨vÜ«/B0$×k°=ðbÇ(Ï)w±A†Á†	11Í=èQšµ626ŒÜ/`G«µ<}—-Ö7KEHÈÉðóȤmݱû±·ø«Snmá=“ä«šmݱŸ¡¶~ó·“äUóJæúòB|E LêŽy´jDÔ$G¢þÐñ7óR8ýÒ…Ç›	WVe#·Ÿ	p·Fx~•ݤF÷0Èÿ K¯æS<6’¡WШ
;´ÿ ¥Êø\Òuî†åÝ–VNœkÒ7oòX¨Á­Ø÷FÎÑä±g÷ÿ M~Çî=p,X´
ÝÌÚÅ‹
’ÃjÖ.ØöÏñ
qïQ¤ÓZE†° =6·]܈ s¸>v•Ž^Ý\wq9r‰Î\¸¡kURÒ$­*‹Nq?Þª*!sŠÆ:TU_u±T+øX¡
®¹¡,ÄâÃBTsÜ$Ø›4m椴zÜK]’’›Pƒ@€#â˜`é¹=I‡fiV•Ôî“nRm+µFPOhÍ0B£
€+¬5c
v•:P'ÒyÎ ‰V~‚Ó†ÖuókDoh$å\*ö%Ю=£«…aȼ½÷Û.-½VŒŠ¼'lyî±1¬3ó#ÞE¿ÔS¤gV£m›<HqÚ,sVºóÆß¼Hïô…¹…Méi‡Ò" µùEîØÏj|ÓøVOuœ"f’aÞÞëx…˜ÌO`dHHš×4K*H$‡5×
ÚÄ
Â×CUÅAŠŒsr»2°ÄÁiÚ±Çéõe•¶_SÕÆÃ3ˆ•-3´‘¸¡‡cgDîÚ¦ÃcX}'êûJè½9ñìÓ­ä±	×ÓûçÁmO”üVÞ¸÷¥ I~“ÒôhhûýÑwxlïZ¹G¡4ž=”)º£ò
®vÆŽ%UqÝ4qž©­hûÎí‡š§é1R±cÜèðà y' °ôy¦£q§Ýï¬;šÖõ„Sÿ ›  z('S†$Ï}*evÚ¾Kýº8ý
¨å	jÛ]´-‚6«¶ÖK+8ÊiS45jrœèËQDüDØ]R”˜SPÃ
xJÕl>
=§\û"—WU¤ÚǼÿ ÂnÁ
GŒÃ
‚õN	D³õNÚíŒÕ;HôyÄÈ©P¹Ä{:?R‘Ô¨âF÷ø£bÅó® JS|‚R÷ivýáâ€Æé¡è³´IئÑT!§˜•Øª‚¬â@q€wnïCWÄ@JU€ê¯m6]Ï:£âx
'+ÒðXvÓ¦Úm=–´7œ $ì“B£~p%ÕŸUþ« N@¼üï~w˜ñø5®—'Ôe»¤5ã//€ž~‰Tþ›Å7•#¤×Íö
pÄ$ùeåì*«ÓŠEØWEÈsßg¦ûvžSsLpºÊW–âµEWöˬH;™!CYõZÃÄf æ#1W.
\uWâ\,\Çfj’<qTbên›Î[vxx£ë 'ö¨1›˜ÀM¼Pÿ H)ƒêêŒA7s,|F“꺸k³9Ìö*ç®;Ö!Ö$Eiž•¹ÒÚ†ýóéÝû¾ÕS®ó$’NÝäŸz¤5r¦ãÄÃD÷Üø!°ø‡Ô&@m™Ì^Ãä­d	q5Lnÿ N;.6½·N|#ä"1Nƒx“ã<3('&ñß
t  ~ªu”1Tb㫨9ê–›–bìd$ߣ=#ÕãÒmU¯eí$EFù5ýYô櫨æ왍Ǘ±ssM]·á¿
0ÕåJRÓªîiƒ+O58ÖñªŠÒx"	\µâá¨i’¤i
—Ö
”
M+M¤ë9‚‰A¦°Qõ¾ßøK~¼Ã‘g…Ö´~÷Ï[3GUœÒ½#…kàÔ®Ò”‰³·dWV‰IP‰Ú8u¹”E
ÖqLj¾êÕCBš{A^Âß;–¨`¯¬ìö
˼	×tìø.tƐm*n¨y4o&Àx¥n¦×î‡aupáÛj8¿m›è¶ã!o½;ß0y^ý×^EÑ¿ÒjzŒ­)vÚÑnÄL
…^ªô× ‡—‚3k	Îý­hï]içå–îÏ*÷ñþ»Ô
CÒjøjÍznˆ´
¹#b'Fô‹
‰v¥'’à'T´ƒHýÍ%M‰ ƒ&ÆÇŒï1 ‘	–Þ
‰i¬s žR-Ÿ kŠ¬á¬7:þ 0ŒÅÒÕ/aÙ¬ÃÝ#Úøœ
©aiVc‰. ¹¦ãµ”
›Yg¦›ÆÎýº°f³7ƒhá·¸­}&D9¡ÂsÉÙÞèŠõØàC™¨ñbFC|´Ü(ŸƒÚÒ-%»'a	Ì¿)ËÇn¿úÿ ÞŽX…4ÊÅH^ôΑí@ù¹Eh¶“L8Çjù
¼ÎåVªóR©Ï5uÃ
V4lZß®=€xÖŸ–ÑÈ
÷”¨°¾__yM1tÉ?uÆþIkÄgæ@þ[¢†°XÃJ£j·:nkÅ¢u‘}âGzö­/IµèŠ¬¼48q¦F°ŽR¼=ûì{´¯RýicS
ÕÛ íNtÍÙï£,w4rêì®»~x(©Uñ§#Ñ&œÕ¤>ÎåÍÓ9’Ö{9eV­[Öjâ²ãu]˜å2›qÑšÕJç0€sÄ|Êëè0튔bÁ>“{×_F`Ø©ºê:µä,v¤ðfc1±"«ÔÍän1#=·
Âøv~H<Q-Ìk7Æ;•L´©ÙC°.7
¯hKL@ävÊâž$´4¸ð‚¦­R–ÂZ7ÕÃj±·¿rÓrªJ_PÕ.#g¤gÀ)©`ª<KžèÝ'ä©èÒ3rwû€Ø¦ÒƒLf¤
,¿I½{Ƕ8‘$KÝU/Oi>½ÐßA¾¿Ü€Óš]Õ; I¾÷ç‚Qi†î¹9ywÔKG˜áñ zQY—§ÃÕZ07§X‚Áh;ÁM)iÌCH-¯T‘ë|A0{Ò½LÚ–TâÖkÜ’dÀ“rmm»”جPF³ÖcbE§T€ÒxKºû’Ó®7±²(\4ŽÃ¸Uu@j™yĵ;³µ!Á¢b.W¤=mõ´êµKk
¸K^ÜÛ#p*Ü14qkZç5ïë†°5Ï%ÍÛ<Õ¤×Ô¥ê†C	Õ´¼ú$ƒÖ“”]Ù¬qÞÚ[4©ý!ûÏ—Áb쳐XµA¬â~`›Çr¸8ìùÝ䫦<>ä÷«?xs´ÇÑ	/á;¹øüÊÈÙà{"@Žïzâ¬[âß‚ U_<ÇŸ½4èN˜ú61®qŠu ¦þF£»äJ_ˆÙÎ~ ÞAã–Ý„Ï—rŠD;xTž‘ô`É«…suãO`?³à™ô
Lý#Íc5öoæØ‚y´´÷«ZR§<&JÇ+éâô´€i!Àˆ0æAoàðLèÖ-2ŸõW.’t^–(KÁmHµV@xÜÇy®Ñø­â^:Ú3w· 7½¹°ñ¸â¹®:',«Mœ—n­Á+Ãbš
LÈ‘ÄnRÓÅœ%¦²‰¨ùQ:¤f‚ "PÕtô¸…cæl…&˜Ú˜Ôkv‹ž+vŠ,=¢v­6—X
y*¥t£«<™:“aï<QÝ&Ó]i4音äzçáíHÚÕxcòãæäÝÔm퐡 `Â)C×ehÀdHP6ÅMEöZ®Í¨	é¾Tr뢘6*¶;´sÙì]ÊŽŽÛíÉwRÈ´up* Ã	‚m´:Û{·”MUë©õ̤êÔo7:ŽÕ
qÏ'E ˆk^uãT€$Ú$Æ{•ŸBP°al¾Ž©ŒÃ^}äA
,º­$Ü]ºÚ.í:‹¤ÜöXnno7X€¥BÂà ±1ã>Œºîϲ=¦6rO]XI¿Œ÷¤zÚ­›¶ 6÷”w\dü~v®ˆÌk«^m<ÿ ¢‰Õ\)ùºŽ;… lîÙÅEŠ®cѾ@vnMÏ,¼“
ñ•ŽBxðÃzãÇç%3ˆ"}Ù•Åî>
BÉú;Ò]V+P˜F_´ßé>
Øše|ï‡ÄOmFæÇ ãqÞ$/xÐx­z`ï9"œÜij‚!7.\Td…9M‡•iŽ‹¾‘50ÞŽn¥ß4ÉôO¹*í^QêËÜÇÌ8=Ž
§s‰'ÂëÙ«á%Pú[O
†ÅP¯VsŽ°.‰,kc¶ ¬A9n˜XÎ-ÞšN["¹QÕ‰ƒMýÁߺXJæÍaLj¾×Ãmã¾ãÚ uñÒþåQô¦¥
/ÄUx:‚ÍÜ’ Đ©ØÝ3V¨‰ÕnÐ6ó*óúK­«…c ¯U òhsý­jóÔj#,ímŒRµ«lbïUTŒÑ8†Ä0œÏr`ð¡¬É	Ї
ë"À²

™	6¥ f¶¢ÚoܱԷ-<Àî)†a¶ž'Ú»¨TXqØæ¶÷Y
ÄHy˜9ÈIW­YÀuMFë
ºÏ’AqÌ4·/Ú
†ô'i$øä­=Ä
Ý|öK×40è|È6p‘0§)o¥ctî§H+CA-“ xØ|ÐXŠç
l8íºð3Ø:³¤¬KX¯UÿÙ
@extends('layouts.base')

@section('contents')

{{-- <div class="mt-24 container mx-auto text-oranye text-bold">
    Beranda > Kategori > Power Tools > Drills
</div> --}}

<!-- PRODUCT DETAIL -->
<div class="mt-24 w-full container mx-auto mt-20 mb-20">
    <p class="font-semibold">
        <a href="#" class="text-oranye">Beranda</a> > <a href="#" class="text-oranye">Power Tools</a> > Drills
    </p>

    <div class="grid grid-cols-12 gap-4 mt-5">

        <div class="col-span-5 rounded" id="frame-product">

            <div x-data="{ image: 'assets/product-13.png', active: 1}" x-cloak>
                <div class="">
                    <div class="rounded-lg bg-gray-100 mb-4 flex items-center justify-center p-5">
                        <img :src="image" class="w-full p-5 object-contain h-96" alt="">
                    </div>
                </div>
                <div class="splide" id="product-images">
                    <div class="splide__slider">
                        <div class="splide__track">
                            <div class="splide__list">
                                <div x-on:click="image = 'assets/product-13.png'"
                                    class="splide__slide focus:outline-none rounded bg-white flex items-center justify-center p-2 border-2 border-gray-300 focus:border-2 focus:border-orange-500 cursor-pointer">
                                    <img src="assets/product-13.png" class="object-contain h-20 p-2" alt="">
                                </div>
                                <div x-on:click="image = 'assets/product-10.png'"
                                    class="splide__slide focus:outline-none rounded bg-white flex items-center justify-center p-2 border-2 border-gray-300 focus:border-2 focus:border-orange-500 cursor-pointer">
                                    <img src="assets/product-10.png" class="object-contain h-20 p-2" alt="">
                                </div>
                                <div x-on:click="image = 'assets/product-2.png'"
                                    class="splide__slide focus:outline-none rounded bg-white flex items-center justify-center p-2 border-2 border-gray-300 focus:border-2 focus:border-orange-500 cursor-pointer">
                                    <img src="assets/product-2.png" class="object-contain h-20 p-2" alt="">
                                </div>
                                <div x-on:click="image = 'assets/product-9.png'"
                                    class="splide__slide focus:outline-none rounded bg-white flex items-center justify-center p-2 border-2 border-gray-300 focus:border-2 focus:border-orange-500 cursor-pointer">
                                    <img src="assets/product-9.png" class="object-contain h-20 p-2" alt="">
                                </div>
                                <div x-on:click="image = 'assets/product-5.png'"
                                    class="splide__slide focus:outline-none rounded bg-white flex items-center justify-center p-2 border-2 border-gray-300 focus:border-2 focus:border-orange-500 cursor-pointer">
                                    <img src="assets/product-5.png" class="object-contain h-20 p-2" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-span-7 px-4">
            <h1 class="text-2xl">
                Makita LXT601 18-Volt LXT 6-Piece Lithium-Ion Cordless Combo Kit
            </h1>

            <h2 class="mt-5 text-2xl font-extrabold">
                Rp 899.000
            </h2>

            <h3 class="mt-3 text-xl text-abu">
                <span class="line-through">Rp 1.258.600</span> <span class="bg-orange-500 text-white px-1">40%</span>
            </h3>

            <div class="description mt-10 text-abu">
                <p class="text-justify">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas
                    accumsan lacus vel facilisis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quis ab
                    reprehenderit suscipit enim impedit perferendis tempora iure quisquam quia ut harum, maxime atque
                    animi numquam facilis ullam voluptate necessitatibus. Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Obcaecati deleniti iure aspernatur culpa consectetur dolores sit esse similique
                    magnam, nulla qui, sunt, delectus repellendus! Officia obcaecati aut voluptatem ad deleniti!
                </p>

                <div class="specification mt-10 flex flex-col">
                    <div>
                        <span class="font-bold">Brand :</span> Makita
                    </div>
                    <div>
                        <span class="font-bold">Product Type :</span> Drills
                    </div>
                    <div>
                        <span class="font-bold">Brand Code :</span> 555-6322-1
                    </div>
                    <div>
                        <span class="font-bold">Weight :</span> 4.5 kg
                    </div>
                    <div>
                        <span class="font-bold">Tags :</span> Gardening Tools, Hand tools, Power tools, Safety and
                        Security
                    </div>


                    <div class="flex items-center justify-items-center mt-10">
                        <div class="font-bold">Kuantitas: </div>
                        <div class="flex flex-row border h-10 w-24 rounded-lg border-gray-400 relative ml-5" x-data="{
                                    quantity: 1 ,
                                    increment() {
                                        this.quantity++;
                                    },
                                    decrement() {
                                        if(this.quantity > 1) {
                                            this.quantity--;
                                        }
                                    },
                                }">
                            <button x-on:click="decrement"
                                class="font-semibold border-r border-gray-400 h-full w-20 flex rounded-l focus:outline-none cursor-pointer">
                                <span class="m-auto">-</span>
                            </button>

                            <input type="hidden"
                                class="lg:p-2 p-1 text-xs lg:text-base border-gray-400 focus:outline-none text-center"
                                readonly name="custom-input-number" />

                            <div
                                class="bg-white w-24 text-xs lg:text-base flex items-center justify-center cursor-default">
                                <span x-text="quantity"></span>
                            </div>

                            <button x-on:click="increment"
                                class="font-semibold border-l border-gray-400 h-full w-20 flex rounded-r focus:outline-none cursor-pointer">
                                <span class="m-auto">+</span>
                            </button>
                        </div>
                    </div>

                    <div class="flex mt-10">
                        <button
                            class="bg-orange-200 text-orange-500 border-2 border-orange-500 rounded py-2 px-4 mr-2  focus:outline-none">
                            <svg class="h-5 w-5 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path
                                    d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
                            </svg>
                            Masukkan Keranjang
                        </button>
                        <button class="bg-orange-500 text-white py-2 px-4 rounded focus:outline-none">
                            Beli Sekarang
                        </button>
                    </div>


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

    </div>

</div>
<!-- END PRODUCT DETAIL -->


<!-- PRODUCT DESCRIPTION -->
<div class="container mx-auto mt-20 mb-20" x-data="{ tab: 'description' }">

    <div class="border-b-2 border-gray-200 text-abu">
        <nav class="flex cursor-pointer">
            <a :class="{ 'text-gray-500 bg-gray-200': tab === 'description' }" @click.prevent="tab = 'description'"
                class="py-2 px-6 bg-white rounded-t-lg mr-1">
                <h2 class="text-xl font-bold">
                    Deskripsi
                </h2>
            </a>
            <a :class="{ 'text-gray-500 bg-gray-200': tab === 'specification' }" @click.prevent="tab = 'specification'"
                class="py-2 px-6 bg-white rounded-t-lg mr-1">
                <h2 class="text-xl font-bold">
                    Spesifikasi
                </h2>
            </a>
            <a :class="{ 'text-gray-500 bg-gray-200': tab === 'review' }" @click.prevent="tab = 'review'"
                class="py-2 px-6 bg-white rounded-t-lg">
                <h2 class="text-xl font-bold flex items-center justify-items-center">
                    Review <span
                        class="ml-1 text-center text-xs bg-orange-500 text-white px-2 h-5 inline-block rounded">2</span>
                </h2>
            </a>
        </nav>
    </div>

    <!-- CONTENT -->
    <div x-show="tab === 'description'" class="mt-10 text-justify">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam debitis mollitia eum, minima voluptatibus
            quidem magnam dolores veniam inventore adipisci ipsam sapiente laudantium, recusandae quibusdam! Eum dicta
            nobis ex excepturi. description
        </p>
        <p class="mt-5">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium at qui facilis, totam reprehenderit
            eveniet placeat quis optio quidem possimus, porro fugit? Doloribus eos facere voluptas ipsam cumque laborum
            nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum unde maiores rerum non. Repellendus
            dignissimos impedit explicabo dolorum earum excepturi beatae amet, odio officia quam. Nesciunt molestias
            fuga et beatae!
        </p>
    </div>

    <div x-show="tab === 'specification'" class="mt-10">

        <table>
            <tr class="border border-indigo-200">
                <td class="bg-indigo-100 p-1 font-bold px-5">
                    Weight
                </td>
                <td class="bg-indigo-100 p-1 px-5">
                    1000 Gram
                </td>
            </tr>

            <tr class="border border-indigo-200">
                <td class="bg-indigo-100 p-1 font-bold px-5">
                    Dimensions
                </td>
                <td class="bg-indigo-100 p-1 px-5">
                    165 x 77.4 x 8.4 mm (6.50 x 3.05 x 0.33 in)
                </td>
            </tr>

            <tr class="border border-indigo-200">
                <td class="bg-indigo-100 p-1 font-bold px-5">
                    3.5mm jack
                </td>
                <td class="bg-indigo-100 p-1 px-5">
                    Yes
                </td>
            </tr>
        </table>

    </div>

    <div x-show="tab === 'review'" class="mt-10">

        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div class="inline-block relative">
                    <div class="relative w-16 h-16 rounded-full overflow-hidden">
                        <img class="absolute top-0 left-0 w-full h-full bg-cover object-fit object-cover"
                            src="https://picsum.photos/id/646/200/200" alt="Profile picture">
                        <div class="absolute top-0 left-0 w-full h-full rounded-full shadow-inner"></div>
                    </div>
                    <svg class="fill-current text-white bg-green-600 rounded-full p-1 absolute bottom-0 right-0 w-6 h-6 -mx-1 -my-1"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path
                            d="M19 11a7.5 7.5 0 0 1-3.5 5.94L10 20l-5.5-3.06A7.5 7.5 0 0 1 1 11V3c3.38 0 6.5-1.12 9-3 2.5 1.89 5.62 3 9 3v8zm-9 1.08l2.92 2.04-1.03-3.41 2.84-2.15-3.56-.08L10 5.12 8.83 8.48l-3.56.08L8.1 10.7l-1.03 3.4L10 12.09z" />
                    </svg>
                </div>
            </div>
            <div class="ml-6">
                <p class="flex items-baseline">
                    <span class="text-gray-600 font-bold">Agung Hermansyah</span>
                    <span class="ml-2 text-green-600 text-xs">Pembeli</span>
                </p>
                <div class="flex items-center mt-1">
                    <svg class="w-4 h-4 fill-current text-yellow-600" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <path
                            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                    <svg class="w-4 h-4 fill-current text-yellow-600" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <path
                            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                    <svg class="w-4 h-4 fill-current text-yellow-600" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <path
                            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                    <svg class="w-4 h-4 fill-current text-yellow-600" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <path
                            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                    <svg class="w-4 h-4 fill-current text-gray-400" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <path
                            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                </div>
                <div class="mt-3">
                    <span class="font-bold">Sapien consequat eleifend!</span>
                    <p class="mt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- END CONTENT -->

</div>
<!-- END PRODUCT DESCRIPTION -->


<!-- OTHER PRODUCT -->
<div class="border-t-2  border-gray-200 container mx-auto py-10">
    <div class="flex justify-between">
        <div class="flex items-center">
            <h2 class="text-2xl font-extrabold text-abu">
                PRODUK TERKAIT
            </h2>
        </div>
    </div>


    <div class="grid grid-cols-6 gap-3 mt-6">
        <!-- PRODUCT -->
        <a href="{{ route('product') }}" class="shadow-lg rounded-xl hover:shadow-xl">
            <div class="flex flex-col rounded-md bg-white p-4 relative border border-gray-200">
                <img src="assets/product-7.png" alt="" class="h-40 object-contain">
                <span class="block text-abu mt-4">
                    Lorem ipsum dolor sit emet
                </span>
                <div class="flex justify-between items-center">
                    <span class="font-bold block text-abu mt-2">
                        Rp 100.000
                    </span>
                    <span class="text-xs text-abu mt-2">
                        3,1rb Terjual
                    </span>
                </div>
            </div>
        </a>
        <!-- END PRODUCT -->
        <!-- PRODUCT -->
        <a href="{{ route('product') }}" class="shadow-lg rounded-xl hover:shadow-xl">
            <div class="flex flex-col rounded-md bg-white p-4 relative border border-gray-200">
                <img src="assets/product-8.png" alt="" class="h-40 object-contain">
                <span class="block text-abu mt-4">
                    Lorem ipsum dolor sit emet
                </span>
                <div class="flex justify-between items-center">
                    <span class="font-bold block text-abu mt-2">
                        Rp 100.000
                    </span>
                    <span class="text-xs text-abu mt-2">
                        3,1rb Terjual
                    </span>
                </div>
            </div>
        </a>
        <!-- END PRODUCT -->
        <!-- PRODUCT -->
        <a href="{{ route('product') }}" class="shadow-lg rounded-xl hover:shadow-xl">
            <div class="flex flex-col rounded-md bg-white p-4 relative border border-gray-200">
                <img src="assets/product-9.png" alt="" class="h-40 object-contain">
                <span class="block text-abu mt-4">
                    Lorem ipsum dolor sit emet
                </span>
                <div class="flex justify-between items-center">
                    <span class="font-bold block text-abu mt-2">
                        Rp 100.000
                    </span>
                    <span class="text-xs text-abu mt-2">
                        3,1rb Terjual
                    </span>
                </div>
            </div>
        </a>
        <!-- END PRODUCT -->
        <!-- PRODUCT -->
        <a href="{{ route('product') }}" class="shadow-lg rounded-xl hover:shadow-xl">
            <div class="flex flex-col rounded-md bg-white p-4 relative border border-gray-200">
                <img src="assets/product-10.png" alt="" class="h-40 object-contain">
                <span class="block text-abu mt-4">
                    Lorem ipsum dolor sit emet
                </span>
                <div class="flex justify-between items-center">
                    <span class="font-bold block text-abu mt-2">
                        Rp 100.000
                    </span>
                    <span class="text-xs text-abu mt-2">
                        3,1rb Terjual
                    </span>
                </div>
            </div>
        </a>
        <!-- END PRODUCT -->
        <!-- PRODUCT -->
        <a href="{{ route('product') }}" class="shadow-lg rounded-xl hover:shadow-xl">
            <div class="flex flex-col rounded-md bg-white p-4 relative border border-gray-200">
                <img src="assets/product-11.png" alt="" class="h-40 object-contain">
                <span class="block text-abu mt-4">
                    Lorem ipsum dolor sit emet
                </span>
                <div class="flex justify-between items-center">
                    <span class="font-bold block text-abu mt-2">
                        Rp 100.000
                    </span>
                    <span class="text-xs text-abu mt-2">
                        3,1rb Terjual
                    </span>
                </div>
            </div>
        </a>
        <!-- END PRODUCT -->
        <!-- PRODUCT -->
        <a href="{{ route('product') }}" class="shadow-lg rounded-xl hover:shadow-xl">
            <div class="flex flex-col rounded-md bg-white p-4 relative border border-gray-200">
                <img src="assets/product-12.png" alt="" class="h-40 object-contain">
                <span class="block text-abu mt-4">
                    Lorem ipsum dolor sit emet
                </span>
                <div class="flex justify-between items-center">
                    <span class="font-bold block text-abu mt-2">
                        Rp 100.000
                    </span>
                    <span class="text-xs text-abu mt-2">
                        3,1rb Terjual
                    </span>
                </div>
            </div>
        </a>
        <!-- END PRODUCT -->
    </div>


    <div class="container mx-auto border-b border-gray-300 mt-20">

    </div>
</div>
<!-- END OTHER PRODUCT -->


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script>
    window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
                document.getElementById("navbar").classList.add("scrolled");
            } else {
                document.getElementById("navbar").classList.remove("scrolled");
            }
        }


        document.addEventListener( 'DOMContentLoaded', function () {
            new Splide( '#product-images', {
                perPage    : 5,
                height     : '5rem',
                cover      : false,
                gap        : '0.5rem',
                arrows      : false,
            } ).mount();
        });
</script>
@endpush
@endsection